react-native react-navigation的用法 react native 导航路由组件react-navigation的使用

一、问题背景

react-navigation是react-native官方推荐的，基于Javascript的可扩展且使用简单的导航，功能强大且完备

回顾一下，react-navigation包含以下功能来帮助我们创建导航器:

StackNavigator - 一次只渲染一个页面，并提供页面之间跳转的方法。当打开一个新的页面时，它被放置在堆栈的顶部
TabNavigator - 渲染一个Tab选项卡，让用户可以在几个Tab页面之间切换
DrawerNavigator - 提供一个从屏幕左侧滑入的抽屉，类似bilibili和QQ的隐藏在左侧的内容栏功能

详细请看： react native 导航路由组件react-navigation的使用

通过这些博客教程，我们可以了解react-navigation的主要功能，如上述的三个功能块，这对于一些练手用的小APP来说，已经够了，

但是，对于稍微有点需求的应用来说，这点功能就不够用了，

问题一：如何重置堆栈？

　　　　比如，登陆成功后，点击返回，总不能让页面返回登录页吧！

问题二：如何有选择的清除堆栈？

　　　　比如，编辑内容发布成功后，跳转的已发布的内容页，这时候再点返回，你总不能返回刚刚的编辑页吧！

问题三：如何在多个StackNavigator之间，或StackNavigator父子间进行导航？

　　　　有时候，我们需要的导航栈不止一个，那么他们之间如何进行页面跳转？

二、分析

我们来看看react-navigation的基本使用：

（1）通过navigate函数实现界面之间跳转：

this.props.navigation.navigate('Mine');

参数为我们在StackNavigator注册界面组件时的名称。

同样也可以从当前页面返回到上一页：

// 返回上一页
this.props.navigation.goBack();

这是手动返回上一页，也可通过每个页面自带的返回图标返回

（2）跳转时传值：

同样，我们也可以在跳转后的页面去获取携带过来的值：

通过state.params来获取传来的参数，后面为key值。此处为info。

（3）react-navigation自带标题栏的使用：

//会覆盖StackNavigator声明的页面的navigationOptions 
static  navigationOptions = ({navigation}) => ({
    headerTintColor: '#fff',
    headerStyle: {height: 65, backgroundColor: '#fb7299'},
    headerTitle: navigation.state.params.title, //这是从上一级跳转携带的
    headerTitleStyle: {
        fontSize: 18,
        color: '#fff',
        alignSelf: 'center',    //包括下面的属性主要是为了标题居中显示
        flex: 1,
        textAlign: 'center'
    },
    headerRight: <View>
    　　　　　　　　　　<TouchableOpacity onPress={() => {navigation.state.params.toOperate();}}>    //此处必须通过添加参数的形式来调用方法
        　　　　　　　　　　<View><Text style={{color: '#fff', marginRight: 20}}>下一步</Text></View>
    　　　　　　　　　　</TouchableOpacity >
　　　　　　　　　　</View>
})

1. navigation.state.params.title表示通过参数的形式来显示标题
2. 想要标题居中，alignSelf: 'center', flex: 1, textAlign: 'center'
3. navigation.state.params.toOperate();通过这种传参的方式，在标题栏中调用方法

该方法需要在componentDidMount()等方法中设置传递

componentDidMount() {
    this.props.navigation.setParams({toOperate: () => {
        alert('操作')
    }})
}

三、结语
先这样咯！

react-native react-navigation的用法 react native 导航路由组件react-navigation的使用

猜你喜欢