React Native 使用StackNavigation跳转页面

最新推荐文章于 2021-08-11 14:41:45 发布

Huangrong_000

最新推荐文章于 2021-08-11 14:41:45 发布

阅读量954

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/u010127332/article/details/83512431

版权

React Native 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

React Native项目中，跳转页面之前用的是Navigator，Navigator已经被React Native废弃，官方推荐的是react-navigation来替代Navigator，使用react-navigation的导航组件可以让页面跳转的实现更加简洁。

一、react-navigation包括下面三个Navigator：

StackNavigator: 这个组件是用来代替之前的Navigator的。凡是维持一种“先进后厨”的栈式导航的话就可以用这个。
TabNavigator：这个组件和iOS的`TabBarController。看起来是这样的。
DrawerNavigator：这个组件就是抽屉式的导航菜单。在React Native里只有Android才有DrawerLayoutAndroid，在iOS里是没有的。有了DrawerNavigator，两个平台都可以用了。

二、StackNavigator组件使用示例。

1、项目集成react-navigation

在项目根目录下，运行：npm install react-navigation --save

2、在App.js组件中

import {
  StackNavigator,
} from 'react-navigation';

export default class App extends Component<Props> {
    constructor(props) {
        super(props);
    }

  render() {
    return (
        <Navigator />
    )
  }
}

const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    },
    Msg:{
        screen: MsgScene
    }
};
const StackNavigatorConfigs = {  // 表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等
    initialRouteName: 'Tab',
    navigationOptions: {
        title: '默认标题栏',
        headerStyle: {backgroundColor: color.primary},  // 设置导航头部样式
        headerTitleStyle: {color: '#333333'},  // 设置导航头部标题样式
        // headerTintColor: '#333333',
         showIcon: true,
    }
};
// StackNavigator 导航组件，用来实现各个界面跳转
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

3、Tab .js的跳转逻辑

	export default class Tab extends Component{
    //UI渲染
    render() {
        return(
            <View style={styles.container}>
                {/*<BackHeader style={styles.title} title="带back的标题栏" showBack={true} />*/}
                <TouchableWithoutFeedback
                    onPress={()=> {
                        this.props.navigation.navigate('Msg', { deviceId: '10010' })
                    }}>
                    <View style={styles.content}>
                        {/*!//跳转到消息页面*/}
                        <Text style={styles.text}>我的,,点击可以跳转</Text>
                    </View>
                </TouchableWithoutFeedback>

            </View>
        );
    }
}

4、跳转到MsgScene.js

export default class MsgScene extends Component{
    //UI渲染
    render() {
        const { params } = this.props.navigation.state;
        //return不带（）会报错
        return(
            <View style={styles.container}>
                <TouchableOpacity
                    //被按下时，文字的不透明度
                    activeOpacity={0.2}
                    onPress={()=> {
                        /*//返回上个页面*/
                        this.props.navigation.goBack()
                    }}>

                    <View style={styles.content}>
                        <Text style={styles.text}>我是{params.deviceId}设备的消息页面,,点击可以跳转回去</Text>
                    </View>

                </TouchableOpacity>
            </View>
        );
    }
}

三、实现效果

由Tab .js页面跳转到Msgcene.js页面，并传递参数10010，在Msgcene.js页面接受设备id参数，点击back可以跳转回去。
在这里插入图片描述

四、react-navigation跳转总结

3、参数

navigationOptions为对应路由页面的配置选项：

title - 可以作为头部标题 headerTitle ，或者Tab标题 tabBarLabel
header - 自定义的头部组件，使用该属性后系统的头部组件会消失
headerTitle - 头部的标题，即页面的标题
headerBackTitle - 返回标题，默认为 title
headerTruncatedBackTitle - 返回标题不能显示时（比如返回标题太长了）显示此标题，默认为 “Back”
headerRight - 头部右边组件
headerLeft - 头部左边组件
headerStyle - 头部组件的样式
headerTitleStyle - 头部标题的样式
headerBackTitleStyle - 头部返回标题的样式
headerTintColor - 头部颜色
headerPressColorAndroid - Android 5.0 以上MD风格的波纹颜色
gesturesEnabled - 否能侧滑返回， iOS 默认 true ， Android 默认 false

StackNavigatorConfigs 参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：

initialRouteName - 导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面
initialRouteParams - 给初始路由的参数，在初始显示的页面中可以通过 this.props.navigation.state.params 来获取
navigationOptions - 路由页面的配置选项，它会被 RouteConfigs 参数中的 navigationOptions 的对应属性覆盖。
paths - 路由中设置的路径的覆盖映射配置
mode - 页面跳转方式，有 card 和 modal 两种，默认为 card ：
card - 原生系统默认的的跳转
modal - 只针对iOS平台，模态跳转
headerMode - 页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种：
float - 渐变，类似iOS的原生效果
screen - 标题与屏幕一起淡入淡出
none - 没有动画
cardStyle - 为各个页面设置统一的样式，比如背景色，字体大小等
transitionConfig - 配置页面跳转的动画，覆盖默认的动画效果
onTransitionStart - 页面跳转动画即将开始时调用
onTransitionEnd - 页面跳转动画一旦完成会马上调用

navigation，在导航器中的每一个页面，都有 navigation 属性，该属性有以下几个属性/方法：