react-native——react-navigation的使用

最新推荐文章于 2024-05-16 01:08:19 发布

就像风1样

最新推荐文章于 2024-05-16 01:08:19 发布

阅读量733

点赞数

分类专栏： ReactNative 文章标签： react-native

本文链接：https://blog.csdn.net/qq_42221334/article/details/86479877

版权

本文详细介绍了React-Native中使用React-Navigation进行页面导航的方法，包括StackNavigator、TabNavigator和DrawerNavigator的配置与使用。通过实例展示了如何设置路由、导航选项以及页面间的跳转操作。

摘要由CSDN通过智能技术生成

在 React Native 中，官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主要包括三个组件：

StackNavigator 导航组件
TabNavigator 切换组件
DrawerNavigator 抽屉组件

StackNavigator 用于实现各个页面之间的跳转， TabNavigator 用来实现同一个页面上不同界面的切换， DrawerNavigator 可以实现侧滑的抽屉效果。

StackNavigator

StackNavigator 组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数：

StackNavigator(RouteConfigs, StackNavigatorConfig)

有 RouteConfigs 和 StackNavigatorConfig 两个参数。

RouteConfigs

RouteConfigs 参数表示各个页面路由配置，类似于android原生开发中的 AndroidManifest.xml ，它是让导航器知道需要导航的路由对应的页面。

const RouteConfigs = {
    Home: {
        screen: HomePage,
        navigationOptions: ({navigation}) => ({
            title: '首页',
        }),
    },
    Find: {
        screen: FindPage,
        navigationOptions: ({navigation}) => ({
            title: '发现',
        }),
    },
    Mine: {
        screen: MinePage,
        navigationOptions: ({navigation}) => ({
            title: '我的',
        }),
    },
};

这里给导航器配置了三个页面， Home 、 Find 、 Mine 为路由名称， screen 属性值 HomePage 、 FindPage 、 MinePage 为对应路由的页面。

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

StackNavigatorConfig

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

const StackNavigatorConfig = {
    initialRouteName: 'Home',
    initialRouteParams: {initPara: '初始页面参数'},
    navigationOptions: {
        title: '标题',
        headerTitleStyle: {fontSize: 18, color: '#666666'},
        headerStyle: {height: 48, backgroundColor: '#fff'},
    },
    paths: 'page/main',
    mode: 'card',
    headerMode: 'screen',
    cardStyle: {backgroundColor: "#ffffff"},
    transitionConfig: (() => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })),
    onTransitionStart: (() => {
        console.log('页面跳转动画开始');
    }),
    onTransitionEnd: (() => {
        console.log('页面跳转动画结束');
    }),
};
initialRouteName - 导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面
initialRouteParams - 给初始路由的参数，在初始显示的页面中可以通过 this.props.navigation.state.params 来获取
navigationOptions - 路由页面的配置选项，它会被 RouteConfigs 参数中的 navigationOptions 的对应属性覆盖。
paths - 路由中设置的路径的覆盖映射配置
mode - 页面跳转方式，有 card 和 modal 两种，默认为 card ：
card - 原生系统默认的的跳转
modal - 只针对iOS平台，模态跳转
headerMode - 页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种：