react-navigation 使用教程(配完整项目)

8,648 阅读7分钟

Fb在React Native当前最新版本0.44中将Navigator删除。推荐使用react-navigation,据称此库有原生般的性能体验效果。可能会成为未来React Native导航组件的主流军。

本文主要介绍如何使用react-navigation构建导航栏与标签栏

这里有个用React Native实现网易新闻客户端的项目,里面除了使用了react-navigation外,还包括其他一些常用库的使用,需要的可以点击传送门>>>

使用前需要了解下StackNavigator和TabNavigator的属性

StackNavigator属性介绍


    navigationOptions:配置StackNavigator的一些属性。  
      
        title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用  
        header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null  
        headerTitle:设置导航栏标题,推荐  
        headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null  
        headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"  
        headerRight:设置导航条右侧。可以是按钮或者其他视图控件  
        headerLeft:设置导航条左侧。可以是按钮或者其他视图控件  
        headerStyle:设置导航条的样式。背景色,宽高等  
        headerTitleStyle:设置导航栏文字样式  
        headerBackTitleStyle:设置导航栏‘返回’文字样式  
        headerTintColor:设置导航栏颜色  
        headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0  
        gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭  
       
      
    screen:对应界面名称,需要填入import之后的页面  
      
    mode:定义跳转风格  
        card:使用iOS和安卓默认的风格  
        modal:iOS独有的使屏幕从底部画出。类似iOS的present效果  
      
    headerMode:返回上级页面时动画效果  
        float:iOS默认的效果  
        screen:滑动过程中,整个页面都会返回  
        none:无动画  
      
    cardStyle:自定义设置跳转效果  
        transitionConfig: 自定义设置滑动返回的配置  
        onTransitionStart:当转换动画即将开始时被调用的功能  
        onTransitionEnd:当转换动画完成,将被调用的功能  
      
    path:路由中设置的路径的覆盖映射配置  
      
    initialRouteName:设置默认的页面组件,必须是上面已注册的页面组件  
      
    initialRouteParams:初始路由参数  

TabNavigator的属性介绍

    screen:和导航的功能是一样的,对应界面名称,可以在其他页面通过这个screen传值和跳转。  
      
    navigationOptions:配置TabNavigator的一些属性  
         title:标题,会同时设置导航条和标签栏的title  
         tabBarVisible:是否隐藏标签栏。默认不隐藏(true)  
         tabBarIcon:设置标签栏的图标。需要给每个都设置  
         tabBarLabel:设置标签栏的title。推荐  
      
    tabBarPosition:设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top''bottom')  
         swipeEnabled:是否允许在标签之间进行滑动  
         animationEnabled:是否在更改标签时显示动画  
         lazy:是否根据需要懒惰呈现标签,而不是提前,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐为true  
         trueinitialRouteName: 设置默认的页面组件  
         backBehavior:按 back 键是否跳转到第一个Tab(首页), none 为不跳转  
      
    tabBarOptions:配置标签栏的一些属性
         activeTintColor:label和icon的前景色 活跃状态下  
         activeBackgroundColor:label和icon的背景色 活跃状态下  
         inactiveTintColor:label和icon的前景色 不活跃状态下  
         inactiveBackgroundColor:label和icon的背景色 不活跃状态下  
         showLabel:是否显示label,默认开启 style:tabbar的样式  
         labelStyle:label的样式安卓属性  
         activeTintColor:label和icon的前景色 活跃状态下  
         inactiveTintColor:label和icon的前景色 不活跃状态下  
         showIcon:是否显示图标,默认关闭  
         showLabel:是否显示label,默认开启 style:tabbar的样式  
         labelStyle:label的样式 upperCaseLabel:是否使标签大写,默认为true  
         pressColor:material涟漪效果的颜色(安卓版本需要大于5.0)  
         pressOpacity:按压标签的透明度变化(安卓版本需要小于5.0)  
         scrollEnabled:是否启用可滚动选项卡 tabStyle:tab的样式  
         indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题  
         labelStyle:label的样式  
         iconStyle:图标样式  

一、App.js

首先在App.js中,导入库,并且设置Navigator。

import { StackNavigator } from 'react-navigation'

const Navigator = StackNavigator(RouteConfig, StackNavigatorConfig);

其中RouteConfig,StackNavigatorConfig我分别写在两个文件中,StackNavigatorConfig可以设置,也可以不设置,主要可以用来设置自定义动画。

二、RouteConfig.js

/*
* 导入视图
*/
import MainTab from './TabNavigator'
import NewsDetail from './pages/subPages/NewsDetail'
import VideoDetail from './pages/subPages/VideoDetail'
import NewsSearch from './pages/subPages/NewsSearch'

/*

    --- 路由配置 ---

   * 所有组件都必须在这里注册
   * 在这里设置的navigationOptions的权限 > 对应页面里面的 static navigationOptions的设置 > StackNavigator()第二个参数里navigationOptions的设置
   * 该配置文件会在App.js里的StackNavigator(导航组件)里使用。

*/
const RouteConfig = {
    MainTab: {
        screen:MainTab,
        //navigationOptions: ({navigation}) => ({header: null})
    },
   // 下面三个页面我需要隐藏导航栏
    NewsDetail: {
        screen: NewsDetail,
        navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})
    },
    VideoDetail: {
        screen: VideoDetail,
        navigationOptions: ({navigation}) => ({header:null, gesturesEnable:true})
    },
    NewsSearch: {
        screen: NewsSearch,
        navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})
    }
}

export default RouteConfig;

三、StackNavigatorConfig.js

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'

// 默认横向跳转
// 如果即将要跳转到的页面需要其它跳转方式
// 可在路由参数中传入 transition参数,可选值有:forHorizontal,forVertical,forFadeFromBottomAndroid,forFade
// 示例定义竖向跳转:this.props.navigation.push('ProdDetail', {'prodID': item.id, 'transition':'forVertical'})
const screenInterpolater = (sceneProps) => {
    const { route } = sceneProps.scene;
    const params = route.params || {};
    const transition = params.transition || 'forHorizontal';
    return CardStackStyleInterpolator[transition](sceneProps);
};

const StackNavigationConfig = {
    initialRouteName: 'MainTab',
    headerMode: 'float',
    transitionConfig:() => ({
        //screenInterpolater: screenInterpolater
        screenInterpolater: CardStackStyleInterpolator.forHorizontal
    })
}

export default StackNavigationConfig;

四、TabNavigator.js

现在开始设置底部标签栏,注意第二步里面的MainTab就是在这个文件里定义的。

import { TabNavigator } from 'react-navigation'
import Home from './pages/Home'
import Live from './pages/Live'
import Mine from './pages/Mine'
import Video from './pages/Video'

export default MainTab = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions:({navigation, screeProps}) => ({
            //这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性

            //设置StackNavigator属性
            header:null,
            headerTitle: '首页',
            headerStyle: styles.navigator,
            headerTitleStyle: styles.navigatorTitle,
            gesturesEnabled:true,

            //这里设置Tabbar不同页面可能会不同的属性
            tabBarVisible: true,
            tabBarLabel:'首页',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? MainTabSelectedIcon : MainTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    },
    Live: {
        screen: Live,
        navigationOptions:({navigation, screeProps}) => ({
            //这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性

            //设置StackNavigator属性
            header:null,
            headerTitle: '直播',
            headerStyle:styles.navigator,
            headerTitleStyle:styles.navigatorTitle,
            gesturesEnabled:true,

            //这里设置Tabbar不同页面可能会不同的属性
            tabBarVisible: true,
            tabBarLabel:'直播',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? LiveTabSelectedIcon : LiveTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    },
    Video: {
        screen: Video,
        navigationOptions:({navigation, screeProps}) => ({
            //这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性

            //设置StackNavigator属性
            header:null,
            headerTitle: '视频',
            headerStyle:styles.navigator,
            headerTitleStyle:styles.navigatorTitle,
            gesturesEnabled:true,

            //这里设置Tabbar不同页面可能会不同的属性
            tabBarVisible: true,
            tabBarLabel:'视频',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? VideoTabSelectedIcon : VideoTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    },
    Mine: {
        screen: Mine,
        navigationOptions:({navigation, screeProps}) => ({
            //这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性

            //设置StackNavigator属性
            header:null,
            headerTitle: '我的',
            headerStyle:styles.navigator,
            headerTitleStyle:styles.navigatorTitle,
            gesturesEnabled:true,

            //这里设置Tabbar不同页面可能会不同的属性
            tabBarVisible: true,
            tabBarLabel:'我的',
            tabBarIcon:(({tintColor,focused}) => {
                return(
                    <Image 
                        source={focused ? MineTabSelectedIcon : MineTabUnSelectedIcon}
                        style={styles.tabbarImage} 
                    />
                )
            }),
        })
    }
},{
    //这里设置的是一般情况下Tabbar共同的属性
    tabBarPosition:'bottom', // 设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top''bottom')
    swipeEnabled:false, // 是否允许在标签之间进行滑动。
    animationEnabled: false, // 是否在更改标签时显示动画。
    lazy:true, // 是否根据需要懒惰呈现标签,而不是提前制作,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐改成true哦。
    initialRouteName:'', // 设置默认的页面组件
    backBehavior:'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
    tabBarOptions:{
          activeTintColor:'#d81e06', // label和icon的前景色 活跃状态下(选中)。
          inactiveTintColor:'#515151', // label和icon的前景色 不活跃状态下(未选中)。
          labelStyle:{
              fontSize: 12,
          }, //label的样式。
    }
})

五、完整代码:

这里有个用React Native实现网易新闻客户端的项目,里面除了使用了react-navigation外,还包括其他一些常用库的使用,需要的可以点击传送门>>>

六、截图

首页

首页
视频列表
视频列表