React Native系列——Navigator组件的使用介绍
一、介绍导航组件Navigator可以让我们客户端在不同的页面见进行切换。为了达到这样的功能，Navigator提供了路由对象功能进行区分识别每一个页面。同时我们可以通过renderScene方法，Navaigator根据指定的路由进行渲染指定的界面。 支持：ios，android 大家先把完整代码看一遍，有个大概了解再开始看文章 二、属性
红色的三个是主要方法 三、页面跳转效果为了改变页面切换的动画或者页面的手势，该组件提供的configureScene属性来进行获取指定路由页面的配置对象信息。对于页面切换动画或者更多的屏幕配置选项信息详情可以查看Navigator.SceneConfigs 关于动画手势有如下一些属性: 更多属性大家可以进行修改NavigatorSceneConfigs.js该文件即可
四、页面跳转方法
说明 1、一个有意思的事情是，如果你的动画是从右边往左进入的，你从左往右滑动，可以回到前一个路由页面 如果想去掉手势返回可以这儿样写
<Navigator
initialRoute={{params:{name:'Home页面',age:14},component:Home}}
configureScene={(route) => {
if (route.sceneConfig) {
let res=route.sceneConfig;
res.gestures=null;
return res;
//return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromBottom;
}}
renderScene={(route,navigator) =>{
let DefaultComponent=route.component;
let number=12;
return <DefaultComponent number={number} {...route.params} navigator={navigator}/>
}
}
/>
2、这些方法要合理使用才能够达到最佳效果，比如筛选页面就应该弹出一个新页面而不把之前的页面卸载。 3、页面跳转方法中的route参数是什么 这些都是navigator可以用的public method,就是跳转用的，里面有些带参数的XXX(route)，新手第一次看这个文档会疑惑，这个route参数是啥呢，这个route就是Navigator组件属性的initialRoute，是一个对象。 解惑我最开始不理解他是怎么设置的，所以每次都会是渲染相同的页面，切换页面的效果也一样，如果所示
产生错误的代码，原因在注释中
classRockqextendsComponent{
render(){
return(
<Navigator
initialRoute={{name:'Home页面',index:0}}
configureScene={(route)=>{
//渲染的动画是固定的了
returnNavigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route,navigator)=>{
constnumber=12;
//渲染的组件是固定的了
return<Homenumber={number}{...route}navigator={navigator}/>
}
}
/>
);
}
}
疑问1、一个应用中只需要一个Navigator吗？ 导航组件中有这么一个属性（navigator object 该为可选参数，可以从父类导航器中获取导航器对象），所以我猜测Navigator可以嵌套，但最好用一个navigator，其实平常我们在根组件上用一个Navigator就可以了。 2、导航组件里面的栈的概念？ 正是因为有了栈，才可以实现返回前进的操作。 3、这些跳转方法的区别？ 时间不够，待完善。 4、navigationBar属性 这个组件我用了一下，就是在你手机屏幕的最下面展示你给的组件，弄不明白干什么用的，好像没什么大用，回头弄清楚了了再给完善进来。 5、组件上onDidFoucs onWillFocus 两个废弃的方法怎么使用 在组件中使用，但是你在用的时候就会发现从page1跳转到home页面的时候，page1中和home中的事件都触发了，可能因为在组件离开的时候忘了取消了，这是react中监听事件的问题。
componentWillMount(){
this.props.navigator.navigationContext.addListener('willfocus',()=>Alert.alert(
'AlertTitle',`将要进入路由${this.props.name}`
));
this.props.navigator.navigationContext.addListener('didfocus',`进入路由${this.props.name}`
));
}
换行
componentWillUnmount(){
this.props.navigator.navigationContext.removeListener('willfocus',`将要进入路由${this.props.name}`
));
this.props.navigator.navigationContext.removeListener('didfocus',`进入路由${this.props.name}`
));
}
重要思考： 后来我又想了一下，发现不对，都是同一个navigator对象，不用添加那么多次所以这个方法可以加载组件的生命周期中，也可以加载Navigator组件中的renderScene方法中。 参考文章http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/2 http://reactnative.cn/docs/0.24/navigator.html#content http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/ 免责说明1、本博客中的文章摘自网上的众多博客，仅作为自己知识的补充和整理，并分享给其他需要的coder，不会用于商用。 2、因为很多博客的地址看完没有及时做保存，所以很多不会在这里标明出处，非常感谢各位大牛的分享，也希望大家理解。 完整代码项目结构 1、App.js代码
importReact,{
AppRegistry,Component,StyleSheet,Text,View,Navigator
}from'react-native';
importHomefrom'./Home';
exportdefaultclassAppextendsComponent{
render(){
return(
<Navigator
initialRoute={{params:{name:'Home页面'},component:Home}}
configureScene={(route)=>{
if(route.sceneConfig){
returnroute.sceneConfig;
}
returnNavigator.SceneConfigs.FloatFromBottom;
}}
renderScene={(route,navigator)=>{
letDefaultComponent=route.component;
letnumber=12;
return<DefaultComponentnumber={number}{...route.params}navigator={navigator}/>
}
}
/>
);
}
}
conststyles=StyleSheet.create({
});
关键就在于configureScene中的动画不要写死，renderScene中渲染的组件不要写死 2、Home.js
importReact,TouchableHighlight,Navigator
}from'react-native';
importPage1from'./Page1';
importPage2from'./Page2';
importPage3from'./Page3';
exportdefaultclassHomeextendsComponent{
render(){
return(
<Viewstyle={styles.container}>
<Textstyle={styles.title}>
{this.props.name}
</Text>
<TouchableHighlight
onPress={()=>this.props.navigator.push({
sceneConfig:Navigator.SceneConfigs.FloatFromRight,component:Page1,params:{
name:'Page1页面'
}
})
}>
<Textstyle={[styles.page1,styles.text]}>
跳转到Page1
</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={()=>this.props.navigator.push({
sceneConfig:Navigator.SceneConfigs.FloatFromBottom,component:Page2,params:{
name:'Page2页面'
}
})
}>
<Textstyle={[styles.page2,styles.text]}>
跳转到Page2
</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={()=>this.props.navigator.push({
sceneConfig:Navigator.SceneConfigs.HorizontalSwipeJumpFromRight,component:Page3,params:{
name:'Page3页面'
}
})
}>
<Textstyle={[styles.page3,styles.text]}>
跳转到Page3
</Text>
</TouchableHighlight>
</View>
);
}
}
conststyles=StyleSheet.create({
container:{
flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},title:{
fontSize:60
},text:{
textAlign:'center',color:'#333333',marginBottom:5,page1:{
fontSize:40,backgroundColor:'red'
},page2:{
fontSize:40,backgroundColor:'blue'
},page3:{
fontSize:40,backgroundColor:'yellow'
},});
3、Page1.js
importReact,Navigator
}from'react-native';
importPage2from'./Page2';
exportdefaultclassPage1extendsComponent{
render(){
return(
<Viewstyle={styles.container}>
<Textstyle={styles.title}>
{this.props.name}
</Text>
<TouchableHighlight
onPress={()=>this.props.navigator.push({
sceneConfig:Navigator.SceneConfigs.FloatFromRight,params:{
name:'Page2页面'
}
})
}>
<Textstyle={[styles.text]}>
跳转到Page2
</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={()=>this.props.navigator.pop()
}>
<Textstyle={[styles.text]}>
返回
</Text>
</TouchableHighlight>
</View>
);
}
}
conststyles=StyleSheet.create({
container:{
flex:1,backgroundColor:'#00ced1',fontSize:40,}
}); （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |