React-Native进阶_5.导航 Naviagtion

有这样一个组件他可以控制页面跳转返回，在移动端叫做导航控制器，在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

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

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

源码下载

原文链接：https://www.f2er.com/react/303337.html

React-Native进阶_5.导航 Naviagtion

猜你在找的React相关文章