React Native导航组件react-navigation（TabNavigator+StackNavigator实现界面间跳转，Tab切换）...

最新推荐文章于 2021-07-21 10:33:46 发布

choujianpi4487

最新推荐文章于 2021-07-21 10:33:46 发布

阅读量908

点赞数 1

文章标签： javascript 移动开发 ViewUI

原文链接：https://my.oschina.net/djonce/blog/915426

版权

下面主要介绍使用TabNavigator+StackNavigator实现界面间跳转，Tab切换。

TabNavigator：渲染出一个tab bar让用户可以在多个screen之间切换（类似底部导航栏，用来在同一屏幕下切换不同界面）

StackNavigator：一次渲染一个screen,在screen之间切换.当一个新的screen被打开的时候,他被放在栈顶（用来跳转页面和传递参数）

1）首先在你的应用中安装此库：

npm install --save react-navigation

2）创建一个.js文件（这里文件命名为MainPage），用于定义TabNavigator：

import React from 'react';
import {
    StyleSheet,
    Image,
    Platform
} from 'react-native';
import {TabNavigator} from "react-navigation";
import Tab1Page from './Tab1Page';
import Tab2Page from './Tab2Page';
import Tab3Page from './Tab3Page';
import Tab4Page from './Tab4Page';

export const MainNavigator = TabNavigator({
    Tab1: {
        screen: Tab1Page,
        navigationOptions: {//配置TabNavigator的一些属性
            title: 'Tab1',//标题，会同时设置导航条和标签栏的title 
            tabBarLabel: 'Tab1',//标签栏的title，这里设置的与标题一样，如不一样时可进行设置
            //设置标签栏的图标
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab1.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
        }
    },
    Tab2: {
        screen: Tab2Page,
        navigationOptions: {
            title: 'Tab2',
            tabBarLabel: 'Tab2',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab2.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
            //header: null,//设置无导航栏（也就是无顶部标题栏）
        },
    },
    Tab3: {
        screen: Tab3Page,
        navigationOptions: {
            title: 'Tab3',
            tabBarLabel: 'Tab3',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab3.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
        }
    },
    Tab4: {
        screen: Tab4Page,
        navigationOptions: {
            title: 'Tab4',
            tabBarLabel: 'Tab4',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab4.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
        }
    }
}, {
    animationEnabled: false, // 切换页面时不显示动画
    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
    swipeEnabled: false, // 禁止左右滑动
    backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
    tabBarOptions: {//配置标签栏的一些属性
        activeTintColor: '#e91e63',// 文字和图片选中颜色
        inactiveTintColor: '#999', // 文字和图片默认颜色
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了 暂时解决这个问题  
        style: {
            backgroundColor: '#F5FCFF', // TabBar 背景色
            paddingBottom:0,
        },
        labelStyle: {
            fontSize: 12, // 文字大小
        },

    },
});

const styles = StyleSheet.create({
    icon: {
        height: 22,
        width: 22,
        resizeMode: 'contain'
    }
});

TabNavigatorConfig

screen：对应界面名称，需要填入import之后的页面

tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'

swipeEnabled：是否允许在标签之间进行滑动

animationEnabled：是否在更改标签时显示动画

lazy-是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true

tabBarOptions：配置标签栏的一些属性

tabBarOptions 配置标签栏的一些属性

activeTintColor：设置文字和图片选中颜色（前景色）

activeBackgroundColor：设置文字和图片选中的背景色

inactiveTintColor：设置文字和图片默认颜色（前景色）

inactiveBackgroundColor：设置文字和图片默认的背景色

showLabel：是否显示label，默认开启

style：tabbar的样式

labelStyle：label的样式

tabStyle：tab的样式

showIcon- android 默认不显示 icon, 需要设置为 true 才会显示

upperCaseLabel：是否使标签大写，默认为true

pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）

pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）

scrollEnabled：是否启用可滚动选项卡

indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题

iconStyle：图标样式

navigationOptions配置TabNavigator的一些属性

title：标题，会同时设置导航条和标签栏的title

tabBarVisible：是否隐藏标签栏。默认不隐藏(true)

tabBarIcon：设置标签栏的图标。需要给每个都设置

tabBarLabel：设置标签栏的title

3)创建一个.js文件（这里的文件命名为AppIndexPage），用于定义StackNavigator：

import React from 'react';
import {StackNavigator} from "react-navigation";
import {MainNavigator} from './MainPage';
import TestPage from './TestPage';
export const AppIndex = StackNavigator({
    Home: {
        screen: MainNavigator,
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#e91e63',
            },
            headerTitleStyle: {
                color: 'white',
                alignSelf: 'center',
            },
        }
    },
    Test: {
        screen: TestPage,
        navigationOptions: {
            title: 'TestPage',
           // headerTintColor: 'white',//导航栏颜色
            headerStyle: {//导航条的样式。背景色，宽高等  
                backgroundColor: '#e91e63',//背景色
            },
            headerTitleStyle: {//导航栏文字样式
                color: 'white',
                alignSelf: 'center',
            },
        },
    },
}, {
    headerMode: 'screen'//headerMode返回上级页面时动画效果
                         // float：iOS默认的效果
                         // screen：滑动过程中，整个页面都会返回
                         // none：无动画
});

StackNavigatorConfig

screen：对应界面名称，需要填入import之后的页面

initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件

initialRouteParams：初始路由参数

navigationOptions：配置StackNavigator的一些属性。

path：路由中设置的路径的覆盖映射配置（path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径，例如：【/pages/Home】。此时我们可以在手机浏览器中输入：app名称://pages/Home来启动该App，并进入Home界面。）

mode：定义跳转风格

card：使用iOS和安卓默认的风格

modal：iOS独有的使屏幕从底部画出。类似iOS的present效果

headerMode：返回上级页面时动画效果

float：iOS默认的效果

screen：滑动过程中，整个页面都会返回

none：无动画

cardStyle：自定义设置跳转效果

transitionConfig：自定义设置滑动返回的配置

onTransitionStart：当转换动画即将开始时被调用的功能

onTransitionEnd：当转换动画完成，将被调用的功能

navigationOptions配置StackNavigator的一些属性

title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用

header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null

headerTitle：设置导航栏标题

headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null

headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"

headerRight：设置导航条右侧。可以是按钮或者其他视图控件

headerLeft：设置导航条左侧。可以是按钮或者其他视图控件

headerStyle：设置导航条的样式。背景色，宽高等

headerTitleStyle：设置导航栏文字样式

headerBackTitleStyle：设置导航栏‘返回’文字样式

headerTintColor：设置导航栏颜色

headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0

gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭

4）界面跳转（传值与取值）

在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过【this.props.navigation】获取并进行一些操作

1）通过navigate实现页面跳转：

this.props.navigation.navigate('Test')

（其中'Test'为我们在StackNavigator注册界面组件时的名称）

返回上一页：

this.props.navigation.goBack();

2）传值

this.props.navigation.navigate('Test',{ user:  'Lucy' })

3）取值

this.props.navigation.state.params.user

5）最后在index.android.js和index.ios.js文件下进行使用，两个文件代码一样，如下：

import React from 'react';
import {
  AppRegistry
} from 'react-native';

import {AppIndex} from './js/pages/AppIndexPage';

AppRegistry.registerComponent('NativeApp', () => AppIndex);

最后，关于react-navigation的具体介绍，可查看官网

转载于:https://my.oschina.net/djonce/blog/915426