react-native對我來說就是一個詞 “new"，現在就記錄下這段時間對這塊新大陸的探索之路吧
一.flexbox佈局
在react-native中使用flexbox佈局，以適用於不同屏幕尺寸。
在父元素標明flex是1，flexDirection表示主軸方向，justifyContent表示主軸對齊方式，alignItems表示次軸對齊方式
當justifyContent，alignItems的值都爲center時，且父元素裏只有一個子元素，則這個子元素居中
二.TouchableOpacity
TouchableOpacity特別好用，每次需要跳轉的時候都可以用TouchableOpacity，它的onPress屬性就是處理跳轉參數的
<TouchableOpacity
onPress={() => that.props.navigation.navigate('test', { id: id })}
>
</TouchableOpacity>
三.TextInput
把secureTextEntry屬性設置爲true即可顯示密碼
把autoCapitalize屬性改爲none則取消首字母大寫
四.樣式
react-native裏的樣式都是駝峯式，樣式總結有三種寫法：
1.直接寫在style屬性裏：
<Text style={{fontSize:14}}></Text>
2.創建stylesheet
<Text style={styles.textstyle}></Text>
const styles = StyleSheet.create({
textstyle: {
color: '#000'
},
})
3.混合
<View style={[styles.textstyle, {backgroundColor: 'red'}]}><View>
五.在react-native裏添加表格
使用react-native-table-component
1.在package.json裏添加，之後使用yarn install重新安裝即可
2.引入react-native-table-component
import { Table, Row, Rows } from 'react-native-table-component';
3.使用如下：
//表格使用的數據格式如下
options: {
tableHead: ['id', '姓名', '年齡'], //表頭
tableData: [ //表內容
[1, '陳小', '23'],
[2, '王王', '32'],
[3, '劉大', '12']
]
}
<Table borderStyle={{borderWidth: 1, borderColor: '#e8e8e8'}}> //表格外框
<Row data={options.tableHead} /> //表頭
<Rows data={options.tableData} /> //表格內容
</Table>
六.監聽鍵盤事件，獲得鍵盤高度
import Keyboard from 'react-native' //引入keyboard
componentWillMount() { //添加監聽事件，監聽“鍵盤出現”，“鍵盤隱藏”
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}
_keyboardDidShow(e) { //當監聽到”鍵盤出現“時，調用這個函數，
Platform.OS === 'ios' &&
this.setState({
keyBoardHeight: isIphoneX ? e.endCoordinates.height -34 : e.endCoordinates.height
//設置鍵盤高度，其中Platform用來判斷當前環境是ios還是android
});
}
_keyboardDidHide() { //當“鍵盤隱藏”時，設置鍵盤高度爲0
this.setState({
keyBoardHeight: 0
});
}
componentWillUnmount(){ //組件銷燬時事件也要移除
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
七.react-native傳遞信息給h5
使用到了webview
webview裏
<WebView
ref={(webview) => {
this.inweb = webview
}}
onLoadEnd={this.onLoadEnd}
source={{uri: insideurl}}
/>
onLoadEnd =(e)=>{
let data = {
name:'adddd'
};
this.inweb&&this.inweb.postMessage(JSON.stringify(data)); //發送消息到H5
};
h5裏：
window.document.addEventListener('message', function(e) { //註冊事件 接收數據
const message = e.data; //e.data就是接收到的數據
})
八.獲得當前滾動高度
<ScrollView scrollEventThrottle = {10} onScroll={this._changeScroll.bind(this)}>
</ScrollView>
_changeScroll(e) {
const scrollNow = e.nativeEvent.contentOffset.y; //獲得當前滾動高度
}
九.獲取元素相對位置
<View onLayout = {({nativeEvent: { layout: {x, y, width, height}}}) => {
this._height = { y,height }
}>
十.使用navigation跳轉頁面不更新
使用到DeviceEventEmitter
如果A跳轉到B
A:要跳轉的時候觸發一個事件
import DeviceEventEmitter from ‘react-native'
DeviceEventEmitter.emit('UPDATE',9999);
B:在componentdidmount裏監聽這個事件，然後強制刷新，重新調接口
componentDidComponent(){
this.subscription = DeviceEventEmitter.addListener('UPDATE',
(param)=>{
this.forceUpdate(); //強制刷新頁面
this.getClue() //重新獲取接口
})
}
componentWillUnmount() { //在組件銷燬時移除這個事件
this.subscription.remove();
};
十一.下拉刷新
<ScrollView refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
>
</ScrollView>
_onRefresh = () => {
this.setState({refreshing: true});
重新獲取接口
this.setState({refreshing: false});
}
十二.把內容套在一個邊框圖片裏
先寫圖片，再寫被套的內容，保證圖片和被套的內容高寬一致，且被套內容最外邊的position是absolute
<Image source={shadow} style={{width: 100,height: 100}} resizeMode='stretch'></Image>
<View style={{position:'absolute',width:100,height:100}}>
</View>
十三.如何在google裏調試iOS模擬器
（1）運行模擬器：react-native run-ios
（2）command+d => Debug JS Remotely 此時會啓動google
（3）在chrome裏選擇視圖->開發者->開發者工具
十四.如何在一段內容上佈置蒙層，左滑後蒙層消失
使用絕對定位，不透明度，以及滑動觸發事件
<View>. //父組件，相對定位
<View></View>//被蓋住的內容
{this.state.dim && ( //蒙層，當dim爲true時出現
<View
style={{ position: 'absolute', top: 0, left: 0, zIndex: 100,backgroundColor: 'rgba(0,0,0,0.7)'}}>
//絕對定位，置於最上，背景模糊（透明度）
<ScrollView horizontal={true} onScrollEndDrag={(e) => this.dimScrollEndDrag(e)}> //滑動後觸發事件
</ScrollView>
</View>
)}
</View>
dimScrollEndDrag = (e) => { //當滑動後執行該事件，置dim爲false，蒙層不展示
this.setState({
dim: false
})
}
十五.父組件傳數據到子組件，子組件修改該數據後傳回父組件
父組件
<Filtern
industrytwo={this.state.industrytwo} //傳數據到子組件
changeindus={elems => this._changeindus(elems)} //從子組件拿回數據
/>
子組件
this.props.industrytwo. //從父組件拿到數據this.props.changeindus(options); //通過父組件的方法把數據傳回父組件
待續....