看了兩節(jié) RN 的視頻教程衫仑，發(fā)覺還是直接看文檔來得快梨与，跟著官方的 NavigatorIOS 的文檔來寫了下，中間還真被自己坑了好幾把文狱，在這里記錄下蛋欣。
先來創(chuàng)建三個頁面：Home 頁面、Other 頁面 和 More 頁面如贷。
我們看下 index.ios.js 內容：
class ExamBank_iOS extends Component {
// 右邊button點擊事件
handleNavigationRequest() {
this.refs.nav.push({
component: More,
title: 'More',
passProps: { myProp: '快來碗里' },
});
}
render() {
return (
<NavigatorIOS
ref='nav'
style={styles.container}
barTintColor='#ffffcc'
initialRoute={{
title: 'NavigatorIOS',
component: Home,
rightButtonTitle: 'More',
onRightButtonPress: () => this.handleNavigationRequest(),
}} />
);
}
};
根據官方文檔來創(chuàng)建大概就是這個樣子的陷虎，barTintColor 是設置 Navigator 的顏色的，其中：
passProps: { myProp: '快來碗里' },
會向 push 頁面?zhèn)鬟f一個名為 myProp杠袱， 值為 ‘快來碗里’ 的參數尚猿，類型 iOS 里 ViewController 的.h 文件里的屬性，可以接收外部的值楣富。這里需要注意下：
ref='nav'
別忘記寫了凿掂，要不 this.refs.nav.push 是找不到的。
這里來詳細說下 Home.js纹蝴，其中它與 More.js 和 Other.js 內容是類似庄萎，只說其中一個的內容，詳細內容可以查看文章結尾的 Demo 鏈接塘安。
Home.js 內容：
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableHighlight
} from 'react-native';
var Other = require('./Other');
var styles = StyleSheet.create({
mainContainer:{
flex: 1,
backgroundColor: '#F5FCFF'
},
button:{
top: 100,
},
text: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
class Home extends React.Component{
constructor(props) {
super(props);
this.onPress = this.onPress.bind(this);
}
onPress() {
this.props.navigator.push({
title: 'Other',
component: Other
});
}
render() {
return (
<View style={styles.mainContainer}>
<TouchableHighlight
onPress={this.onPress}
style={styles.button}
underlayColor='#ffffcc'
>
<Text style={styles.text}>Welcome to the NavigatorIOS . Press here!</Text>
</TouchableHighlight>
</View>
);
}
};
module.exports = Home;
這里主要要說的是糠涛，onPress() 方法需要 bind(this)，要不然后就會報：
在構造函數里 bind：
constructor(props) {
super(props);
this.onPress = this.onPress.bind(this);
}
為什么在index.ios.js里不用bind(this)嗯兼犯，但是跳轉頁面后就需要忍捡，這個我也不太懂，回頭去看下基礎后再來補充了切黔。
----------華麗的分割線------------------
晚上看書解決了這個問題砸脊，就是綁定作用域的功能，詳細可以看這里的結尾處
----------華麗的分割線-end--------------
這里附上一個看視頻教程的建議：首先不想死看視頻纬霞，視頻上說的和當前版本不一定對應凌埂，RN 一直在不斷更新版本，肯定會有很多的出入诗芜，要學會利用官方文檔瞳抓；第二點是要速看視頻秒紧，比如我看這種教程視頻都是1.5倍速以上來看的，關鍵點時才會調慢小小挨下，主要是不要看著視頻抄代碼，過一次就自己動手去敲一下脐湾。
當初學習 Java 和 iOS 時都是這么搞臭笆，感覺效率還行~~~~
最后，Demo 在這里~~~~歡迎關注我哦秤掌，大家一起學習愁铺，后面堅持分享。
