react-native 导航组件react-navigation详解

继续上篇文章 ，还是先看下上篇文章 react-navigation 的官方文档，没看也没有关系，请看下面我的唠叨
我们 配置路由，话不多说，直接还是贴代码吧。

1、 StackNavigator: 用于app界面窗口之间的切换
2 、TabNavigator: 用于设置一个界面的不同tabs
3、 DrawerNavigator: 抽屉效果，侧边滑出

充当router.js,这是自己的 demo 底部有tab 切换的路由

import {StackNavigator,TabNavigator} from 'react-navigation';
import HomePage from './home/index';  //首页
import TaskPage from './popularize/index';// 根据自己想建什么页面都可以
import Mine from './mine/index';  //可以认为是个人中心
import AlbumList from './albumList/index';  // 另外一个页面
import ComponentsPage from './ComponentsPage/index' // 这是我页面我用来写第三方组件，demo

export const TabNav = TabNavigator(
  {
      Home: {
          screen: HomePage,
      },
      Task: {
          screen: TaskPage,
          navigationOptions: {
            title: '专辑列表',  
            tabBarLabel: "专辑列表", 
          }
      },
      Components:{
          screen:ComponentsPage,
          navigationOptions:{
              title:'三方组件库',
              tabBarLabel:'第三方'
          }
      },
      
      Mine: {
          screen: Mine,
          navigationOptions:({navigation})=>( {
            headerTitle: "个人中心",
            tabBarLabel: "我的",
          })
      }
  },
  {
      tabBarOptions: {
          //当前选中的tab bar的文本颜色和图标颜色
          activeTintColor: '#4BC1D2',
          //当前未选中的tab bar的文本颜色和图标颜色
          inactiveTintColor: '#000',
          //是否显示tab bar的图标，默认是false
          showIcon: false,
          //showLabel - 是否显示tab bar的文本，默认是true
          showLabel: true,
          //是否将文本转换为大小，默认是true
          upperCaseLabel: false,
          //material design中的波纹颜色(仅支持Android >= 5.0)
          pressColor: '#788493',
          //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
          pressOpacity: 0.8,
          //tab bar的样式
          style: {
              backgroundColor: '#fff',
              paddingBottom: 1,
              borderTopWidth: 0.2,
              paddingTop:1,
              borderTopColor: '#ccc',
          },
          //tab bar的文本样式
          labelStyle: {
              fontSize: 11,
              margin: 1
          },
          //tab 页指示符的样式 (tab页下面的一条线).
          indicatorStyle: {height: 0},
      },
      //tab bar的位置, 可选值： 'top' or 'bottom'
      tabBarPosition: 'bottom',
      //是否允许滑动切换tab页
      swipeEnabled: true,
      //是否在切换tab页时使用动画
      animationEnabled: true,
      //是否懒加载
      lazy: true,
      //返回按钮是否会导致tab切换到初始tab页？ 如果是，则设置为initialRoute，否则为none。 缺省为initialRoute。
      backBehavior: 'none',
  }
);

// 注册所有的页面
export default StackNavigator({
  Main: {
    screen: TabNav,
  },
  AlbumList: {
    screen: AlbumList,
}
},
{
  headerMode: 'screen',  // 标题导航
  initialRouteName: 'Main', // 默认先加载的页面组件
  mode: 'card'       // 定义跳转风格(card、modal)
} 
)

路由配置好所有的组件都注册完成之后肯定要挂载

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import Router from './src/index';  // 这个就是上面 的代码，router 配置
import {Platform, StyleSheet, Text, View,Image,TextInput,Button,Alert} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <View style={styles.container}>
          <View style={{flex: 1}}>
            <Router/>  // 在这边直接引入就好了
          </View>     
      </View>
     
    );
  }
}

const styles = StyleSheet.create({ 
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    // alignItems: 'center',
    backgroundColor: "#F5FCFF"
  }
});

出来的效果，这样点击底部的 tab 就可以切换页面了

上面 我的代码是 StackNavigator 和 TabNavigator 实现的底部tab 但是 后来发现 createBottomTabNavigator 可以实现

下面针对react-navigation 的几个属性 写个简单的demo，便于理解，

标签：React,react,tab,import,native,navigation,页面
From： https://www.cnblogs.com/sexintercourse/p/16954061.html