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

时间 2019-12-05

标签 react navigation 使用教程完整项目栏目 React 繁體版

原文原文链接

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

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

这里有个用React Native实现网易新闻客户端的项目，里面除了使用了react-navigation外，还包括其余一些经常使用库的使用，须要的能够点击传送门>>>github

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

StackNavigator属性介绍app

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的属性介绍ide

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：图标样式  
复制代码

1、App.js

首先在App.js中，导入库，而且设置Navigator。性能

import { StackNavigator } from 'react-navigation'

const Navigator = StackNavigator(RouteConfig, StackNavigatorConfig);
复制代码

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

2、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;
复制代码

3、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;
复制代码

4、TabNavigator.js

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

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的样式。
    }
})
复制代码

5、完整代码：

这里有个用React Native实现网易新闻客户端的项目，里面除了使用了react-navigation外，还包括其余一些经常使用库的使用，须要的能够点击传送门>>>this

6、截图

首页

视频列表