搞了一天的RN-导航条了，终于有点成就，特来记录一下
整体项目目录如下
index.ios.js是项目的入口
里面的代码是转到另外一个入口
B63114D6-9C78-47AE-8DBA-C91FD0DB85CA.png
HomePage.js 是导航条所在的文件
导航条默认加载FirstPage.js文件
HomePage.js
首先是创建navigator
//这种是带导航条的
render() {
return (
<Navigator
initialRoute={{ name: 'FirstPageComponent', component: FirstPageComponent }}//默认加载的页面
configureScene={this.configureScene}
renderScene={this.renderScene}
style={{flex:1}}
navigationBar={
<Navigator.NavigationBar style={homePageStyle.navStyleBase}
routeMapper={NavigationBarRouteMapper}/>}
/>
);
}
//这种是不带导航条的
render() {
return (
<Navigator
initialRoute={{ name: 'FirstPageComponent', component: FirstPageComponent }}//默认加载的页面
configureScene={this.configureScene}
renderScene={this.renderScene}
style={{flex:1}}
/>
);
}
configureScene:配置动画
//这是所有的动画，具体效果可以一一尝试
/** 配置跳转动画
* - Navigator.SceneConfigs.PushFromRight (default)
* - Navigator.SceneConfigs.FloatFromRight
* - Navigator.SceneConfigs.FloatFromLeft
* - Navigator.SceneConfigs.FloatFromBottom
* - Navigator.SceneConfigs.FloatFromBottomAndroid
* - Navigator.SceneConfigs.FadeAndroid
* - Navigator.SceneConfigs.HorizontalSwipeJump
* - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
* - Navigator.SceneConfigs.VerticalUpSwipeJump
* - Navigator.SceneConfigs.VerticalDownSwipeJump
*/
configureScene(route) {
return Navigator.SceneConfigs.FloatFromRight
}
renderScene:我们可以在该方法中设置需要渲染的场景（跳转的页面），该方法接收两个参数（必要参数），route和navigator，其中route就是路由的页面，navigator是一个Navigator对象，因为Navigator对象拥有pop，push，jump等方法，我们需要导航器对象来实现页面的跳转。而路由route需要我们提前进行配置
renderScene(route, navigator) {
return <route.component navigator={navigator} />
}
然后配置导航条的标题、左按钮、右按钮
var NavigationBarRouteMapper = {
// 标题
Title(route, navigator, index, navState) {
return (
<View>
<Text style={homePageStyle.navTitleStyle}>
应用标题
</Text>
</View>
);
},
// 左键
LeftButton(route, navigator, index, navState) {
if (index > 0) {
return (
<View>
<TouchableOpacity
underlayColor='transparent'
onPress={() => {
if (index > 0) {
navigator.pop()
}
}}>
<Text style={homePageStyle.navLeftButtonStyle}>
返回
</Text>
</TouchableOpacity>
</View>
);
} else {
return null;
}
},
RightButton(route, navigator, index, navState) {
if (route.onPress)
return (
<View>
<TouchableOpacity
onPress={() => route.onPress()}>
<Text style={homePageStyle.navRightButtonStyle}>
right
</Text>
</TouchableOpacity>
</View>
);
},
};
样式
const homePageStyle = StyleSheet.create({
textStyleBase:{
marginTop:40,
marginHorizontal:20,
color:'red',
textAlign:'center',
},
navStyleBase:{
backgroundColor:'blue',
},
navTitleStyle:{
color:'white',
textAlign:'center',
flex:1,
fontSize:18,
fontWeight:'bold',
marginVertical:5,
},
navLeftButtonStyle:{
color:'white',
marginLeft:10,
fontSize:15,
marginTop:5,
},
navRightButtonStyle:{
color:'black',
marginRight:10,
fontSize:15,
},
});
FirstPage.js
import SecondPageComponent from './SecondPage'
//点击第一页，跳转到第二个页面
goPage2() {
this.props.navigator.push({
component:SecondPageComponent,//指定跳转到第二个页面
})
}
render() {
return (
<View style={firstPageStyle.viewStyleBase}>
<TouchableOpacity style={firstPageStyle.opacityStyleBase} onPress={() => this.goPage2()}>
<Text style={firstPageStyle.textStyleBase}>第一页</Text>
</TouchableOpacity>
</View>
)
}
}
样式
const firstPageStyle = StyleSheet.create({
textStyleBase:{
color:'green',
textAlign:'center',
},
viewStyleBase:{
backgroundColor:'red',
flex:1,
},
opacityStyleBase:{
flex:1,
marginTop:100,
},
});
SenondPage.js
//返回第一页
backPage1() {
this.props.navigator.pop()
}
render() {
return (
<View style={firstPageStyle.viewStyleBase}>
<TouchableOpacity onPress={() => this.backPage1()}>
<Text style={firstPageStyle.textStyleBase}>第二页</Text>
</View>
)
}
样式
const firstPageStyle = StyleSheet.create({
textStyleBase:{
marginTop:100,
marginHorizontal:20,
color:'green',
textAlign:'center',
},
viewStyleBase:{
backgroundColor:'blue',
flex:1,
},
});
这样，就可以进行页面的push了
navgif.gif
