这是一个控制视图跳转的组件(类似于Android原生中的Activity之间的跳转)
自己的理解和实践
RN会先加载index.android.js
中的组件,这样,我们就在该文件中只实现路由的跳转。
index.android.js
export default class StudyNavigationApp extends Component {
render() {
return (
<Navigator
initialRoute={{title:'My initial Scene',index:0}}
renderScene={(route,navigator)=>{
switch (route.index){
case 0:
return <MyScene navigator={navigator}/>
break;
case 1:
return <ComponentStudy0 navigator={navigator}/>
break;
}
}
}
/>
);
}
}
这里我们默认了index为0的时候需要加载MyScene
:
class MyScene extends Component {
render() {
return (
<View>
<TouchableHighlight onPress={()=>this.props.navigator.push({index:1})}>
<Text>
Hi,My name is hehe
</Text>
</TouchableHighlight>
</View>
)
}
}
在上面的默认加载index为0的时候加载MyScene
的时候,传入了navigator
参数,并在MyScene
中通过props
使用。
这样,每次新建一个视图的的时候,只要在跳转的时候,指明其index
就行了。
Note:
外部定义需要引入的class需要被export default
进行修饰
监听后退按键
constructor(props) {
super(props);
this.goBack = this.goBack.bind(this);
}
componentDidMount() {
BackAndroid.addEventListener('hardwareBackPress', this.goBack);
}
componentWillUnMount() {
BackAndroid.removeEventListener('hardwareBackPress', this.goBack);
}
当然,你需要先引入BackAndroid
,然后在Navigator
的属性renderScene
中实例化_navigator
.
<Navigator
initialRoute={{title:'RN study',index:0}}
renderScene={(route,navigator)=>{
_navigator = navigator;
}
....