React-Native进阶_5.导航 Naviagtion
有这样一个组件 他可以控制页面跳转 返回,在移动端叫做导航控制器, 在RN中叫路由 我们使用的 react-native-navigation 是一个开源组件库 1.StackNavigator :类似于普通的Navigator,屏幕上方导航栏 命令行执行:npm install --save react-navigation 导入: import { StackNavigator,} from 'react-navigation'; 接下来定义路由栈: 里面有两个组件 第一个页面 电影列表页,Main 第二个页面 电影详情页 Detail。 分别用Main和Detail表示。 const App = StackNavigator({ Main: {screen: MovieList,navigationOptions: { title: "推荐电影",headerLeft: null,headerStyle:{ elevation: 0 },headerTitleStyle:{ alignSelf:'center'},},Detail: {screen: MovieDetail,navigationOptions:({navigation,screenProps}) =>({ headerTitle: navigation.state.params.info,} ) },}); 在电影列表页 ,点击某一个电影 ,跳转到具体的详情页 onPress={() => this.props.navigation.navigate('Detail',{info:movie.title})} 在电影详情页,通过this.props.navigation.state 获取传递过去的title,并展示出来。 /** * 电影详情页 */ 'use strict' import React,{Component} from 'react'; import styles from '../Styles/Main'; import { Text,View,} from 'react-native'; export default class MovieDetail extends Component{ render() { // The screen's current route is passed in to `props.navigation.state`: const { params } = this.props.navigation.state return ( <View> <Text style ={styles.Text}>{params.info}</Text> </View> ); } } 效果展示: 关于 Navigation 的使用参考 官网介绍: react-navigation使用技巧: http://www.jianshu.com/p/2f575cc35780 React-navigation之StackNavigator: http://blog.csdn.net/lu1024188315/article/details/73550028 ---------------欢迎各位大神加群 ----------------Android交流群:230274309 -----------------------------期待大神们的到来 ------------------------一---起分享,一起进步!需要你们 源码下载 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |