一、 RN前端各頁面間傳遞數(shù)據(jù)
RN前端頁面間的跳轉(zhuǎn)使用Navigator羞反，并且所有的前端文件均在同一個(gè)目錄下。
在第一個(gè)JS(FirstPage)中定義各JS頁面的名稱
import {
SecondPage
} from "./currentBuy";// SecondPage這個(gè)代號(hào)所實(shí)際對(duì)應(yīng)的JS的真正名稱“currentBuy”
const XXX(JS模塊的名稱) = StackNavigator({
First: {screen: FirstPage},//當(dāng)前JS的類名
Second: {screen: SecondPage},//要跳轉(zhuǎn)到的代號(hào)為SecondPage的JS
});
在需要跳轉(zhuǎn)到另一個(gè)JS頁面（代號(hào)為SecondPage）的地方（如點(diǎn)擊某個(gè)按鈕）添加：
this.props.navigation.navigate(Second, {'Number': '12345'})//把12345賦值到Number感局，并傳遞到代號(hào)為SecondPage的JS頁面
在第二個(gè)JS（SecondPage）中接收數(shù)據(jù)
componentDidMount() {//JS組件已經(jīng)渲染完成時(shí)
const {params} = this.props.navigation.state;//從navigation.state中取出值賦到params中
this.state.Number = params.Number;//從params中取出關(guān)鍵字為Number的數(shù)值
}
這時(shí)this.state.Number中就是從FirstPage中傳來的數(shù)據(jù)霜第，可以把這個(gè)數(shù)據(jù)賦值到任何一個(gè)組件上
二械馆、 RN前端基本語法介紹
1央渣、 布局：
RN前端布局的思想基本和Android LinearLayout一致涩惑，通過flexDirection: 'row'(水平排列)低飒，flexDirection: 'column'(垂直排列许昨，不設(shè)默認(rèn)為垂直排列)，來設(shè)置排列方式
<View style={styles.tipItem}>//通過style={styles.tipItem}這種寫法褥赊，設(shè)置布局樣式
<Image style={styles.tip}
source={require('./image/tipImg.png')}>
…
</Image>
</View>
從上面代碼可以看出View的下層是Image糕档，也就是說View包裹住Image
tipItem: {
flex: 1,//類似于android布局中隨父類
height: 15,
width: 15,
fontSize: 15,
color: '#666666'
marginTop: 50,
marginLeft: 15,
marginRight: 15,
marginBottom: 35,
},
tip: {
width: Dimensions.get('window').width - 30,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 15,
paddingBottom: 15,
resizeMode: "stretch"http://設(shè)置圖片拉伸的方式
},
可以看到android布局中設(shè)置的控件寬高，邊距崭倘，字體翼岁，顏色等方式在這里也是適用的
2、 默認(rèn)值
RN前端的控件也會(huì)有默認(rèn)值司光，比如一個(gè)Text控件琅坡，默認(rèn)顯示“起投金額”，text后面跟一個(gè)TextInput控件残家，顯示提示語'請(qǐng)輸入投資金額榆俺，--元起投'
通過一個(gè)構(gòu)造函數(shù)來設(shè)置默認(rèn)值
constructor(props) {
super(props);
this.state = {
AmountTip: '請(qǐng)輸入投資金額，--元起投',
}
}
<TextInput style={[styles.flex, styles.amountUnitInput]}
value={this.state.Amount}
placeholder={this.state.AmountTip}>//通過this.state.XXX這種方式來賦值
</TextInput>
如果要改變XXX的值坞淮，通過
this.setState({
XXX: '請(qǐng)輸入投資金額茴晋，1000元起投',
})
這時(shí)引用這個(gè)值的地方都會(huì)相應(yīng)的改變了
3、 component 生命周期
A．componentWillMount
渲染前調(diào)用回窘，在初始化render之前執(zhí)行诺擅，如果在這個(gè)方法內(nèi)調(diào)用setState對(duì)值進(jìn)行修改，不會(huì)重新渲染
B．render
render里定義各種組件布局
C．componentDidMount
在初始化render之后,啡直，JS組件已經(jīng)渲染完成時(shí)烁涌，執(zhí)行一次苍碟，在這個(gè)方法內(nèi)，調(diào)用setState對(duì)值進(jìn)行修改撮执，可以重新渲染組件微峰，還可以添加 JS 同其他頁面的交互，獲取數(shù)據(jù)抒钱，發(fā)起網(wǎng)絡(luò)請(qǐng)求等
