React-Native进阶_5.导航 Naviagtion

来源：互联网发布：怎么在淘宝举报店铺编辑：程序博客网时间：2024/06/05 05:07

有这样一个组件他可以控制页面跳转返回，在移动端叫做导航控制器，在RN中叫路由

我们使用的 react-native-navigation 是一个开源组件库
介绍：A complete native navigation solution for React Native - nav bars, tabs, drawer, modals
这个组件库的功能很强大，涵盖了类似底部导航的TabNavigator ，屏幕上方导航栏 StackNavigator以及抽屉效果的DrawerNavigator

1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏
2.TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏
3.DrawerNavigator：抽屉效果，左侧滑出这种效果。

React-navigation之StackNavigator
这里我们学习使用一下StackNavigator来实现页面跳转

首先安装这个库，在我们项目的根目录下

命令行执行：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 的使用参考

官网介绍：
https://reactnavigation.org/docs/intro/ Hello Mobile Navigation
https://reactnavigation.org/docs/navigators/stack

react-navigation使用技巧：

http://www.jianshu.com/p/2f575cc35780

React-navigation之StackNavigator：

http://blog.csdn.net/lu1024188315/article/details/73550028

---------------欢迎各位大神加群

----------------Android交流群：230274309

-----------------------------期待大神们的到来

------------------------一---起分享，一起进步！需要你们

源码下载

阅读全文

0 0