ReactNavigation导航使用汇总

作者: gogoingmonkey | 来源:发表于2017-10-19 09:49 被阅读1130次

ReactNavigation导航使用汇总
流水账式ReactNative实战一：ReactNavigati
路由1navigation-堆栈导航
05三方库--001--react-navigation
Web导航设计学习
React-Navigation(一)，参照官网用法记录
关于导航栏和状态栏
react-native - 相关链接
iOS导航栏使用总结
JS 资料

react-navigation使用

facebook前一段时间开始推荐使用react-navigation，并且在0.44发布的时将之前一直存在的Navigator废弃了。解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。目前还在完善中。

react-navigation分为三个部分：

StackNavigator类似顶部导航条，用来跳转页面和传递参数。
TabNavigator类似底部标签栏，用来区分模块。
DrawerNavigator抽屉，类似从App左侧滑出一个页面。目前是用不到。

第三方组件使用前要安装：

NPM下安装：

npm install --save react-navigation

Yarn安装：

yarn add react-navigation

顶部导航的基本使用:

1.引入控件：

import { StackNavigator } from 'react-navigation';

2.创建第一个页面：

class HomeScreen extends Component {
static navigationOptions = {
title: 'Home',    //  顶部标题
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!代码控制台</Text>
<Button
onPress={() => navigate('Chat')}
title="Go Chat"
/>
</View>
);
}
}

针对这个navigationOptions 属性分析下（侧滑菜单使用），

这个使用一般是在类里面：

title：通用标题，当你不写drawerLabel时，使用此参数作为侧滑标题，通常都不写
drawerLabel：侧滑标题
drawerIcon：侧滑的标题图标，这里会回传两个参数，{focused: boolean, tintColor: string}，focused表示是否是选中状态，tintColor表示选中的颜色，这个颜色是我们自己在根视图定义的。当然，你也可以使用其他的组件来作为图标，比如Text

如果有侧滑菜单需要关闭可以直接调用,这里关闭的参数为DrawerClose,通过props属性可以拿到当前navigation，此外属性名一定要写成navigationOptions

   <TouchableOpacity onPress={()=>{
                    //点击关闭侧滑
                    this.props.navigation.navigate('DrawerClose')
                    //打开侧滑：
                    this.props.navigation.navigate('DrawerOpen')
                }}>
                    <Text>关闭侧滑栏</Text>
                </TouchableOpacity>

3.创建要跳转的页面：

export class ChatScreen extends Component {
static navigationOptions = {
title: 'Chat',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}

4.写一个页面控制器：

const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});

这样就可以直接使用跳转了

StackNavigator属性深入分析

可以看到上面第四部的页面控制器用到了 StackNavigator，这个组件才是使用中的重点也是难点。

先看他的构造：

    StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs:

它主要是来配置页面路由的,和我们安卓的清单文件性质差不多，主要是配置所有的页面：

{
    AAA:{
        screen:FirstNavigation,
        navigationOptions:({
            title:'首页'
        })
    },
    BBB:{
        screen:SecondNavigation,
        navigationOptions:({navigation}) => ({
            title: "第二个界面"
        })
    }
}

上面的navigationOptions 这个是配置属性，可以不用再这里配置，一般这个都是在页面去配置，对应页面需要什么属性，就配置什么。
navigationOptions 属性分析下（）:

title: 这个即可以作为头部标题，也可以作为返回标题和Tab标题，如果设置了这个导航栏和标签栏的title就会变成一样的，所以不推荐使用这个方法。 
header: 自定义导航条，系统的导航条会隐藏 这个属性目前还有bug,需要隐藏可以设置为null
headerTitle: 标题标题，设置导航栏标题，推荐用这个方法。 
headerBackTitle: 回退标题   这个没有显示出来
headerTruncatedBackTitle: 当回退标题不能显示的时候显示此属性的标题，比如回退标题太长了
headerRight: 定义导航栏右边视图
headerLeft: 定义导航栏左边视图  
headerStyle: 定义导航栏的样式，比如背景色等
headerTitleStyle: 定义标题的样式
headerBackTitleStyle: 定义返回标题的样式
headerTintColor: 定义导航条的tintColor，会覆盖headerTitleStyle中的颜色
gesturesEnabled: 定义是否能侧滑返回，iOS默认true，Android默认false

以上的属性使用很多知道是这个,具体使用如下：

static navigationOptions=({
    title:'首页',
    header:(
        <View style={{width:Dimensions.get('window').width,height:64,backgroundColor:'red'}}/>
    ),
    headerTitle:(
        <View style={{width:60,height:20,backgroundColor:'red'}}/>
    ),
    headerBackTitle:'哈哈哈哈哈',
    headerTruncatedBackTitle:'你好',
    headerRight:(
        <View>
            <Text>right</Text>
        </View>
    ),
    headerLeft:(
        <View>
            <Text>left</Text>
        </View>
    ),
    headerStyle: {
        backgroundColor:'yellow'
    },
    headerTitleStyle:{
        color:'red'
    },
    headerBackTitleStyle:{
        tintColor:'#789'
    },
    headerTintColor:'#956',
    gesturesEnabled:false
});

StackNavigatorConfig

主要是配置整个路由的，包括跳转动画，跳转方式等。

initialRouteName: 初始化哪个界面为根界面，如果不配置，默认使用RouteConfigs中的第一个页面当做根界面
initialRouteParams: 初始化根界面参数，主要是给根视图传递一些参数，通过this.props.navigation.state.params可以取到
navigationOptions: 配置默认的navigationOptions
paths: 官方意思是覆盖已经配置的路由，可是我没有试出来效果
mode: 跳转方式，一种是card，默认的，在iOS上是从右到左跳转，在Android上是从下到上，都是使用原生系统的默认跳转方式。一种是modal，只针对iOS平台，模态跳转。
headerMode: 跳转过程中，导航条的动画效果，有三个值，float表示会渐变，类似于iOS的原生效果，screen表示没有渐变。none表示隐藏导航条
cardStyle: 可以统一定义界面的颜色，例如背景色
transitionConfig：配置页面跳转的动画
onTransitionStart: 页面跳转动画即将开始的回调
onTransitionEnd: 页面跳转动画结束的回调

具体代码中的使用如下：

static stackNavigatorConfig = ({
    initialRouteName:'First',
    initialRouteParams:{
        data:'haha'
    },
    navigationOptions:{
        headerTintColor:'red'
    },
    mode:'card',
    headerMode:'screen',
    cardStyle:({backgroundColor:'blue'}),
    onTransitionStart:((route)=>{
        console.log('开始动画');
    }),
    onTransitionEnd:((route)=>{
        console.log('结束动画');
    }),
    transitionConfig:(()=>({
        //因为ios 的导航动画默认是从左到右，所以，这里配置一下动画，使用react-navigation已经实现的从左到右的动画，
        //适配Android，不过，需要导入动画 
        //import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
        screenInterpolator:CardStackStyleInterpolator.forHorizontal,
    }))
});

页面跳转

配置完路由,看下他的属性主要是下面这几个，然后使用在后面逐个讲解：

navigate：路由方法，主要来启动另一个页面
state：状态，其实StackNavigator内部维护了两个路由栈，一个名为newState，是当前显示页面之前的所有页面，包括当前界面。一个名为lastState，当然，通过state还能拿到很多参数。
setParams: 设置参数，记住，一定不要在render方法中调用此方法。
goBack: 返回
dispatch: 给当前界面设置action，会替换原来的跳转，回退等事件

不是在路由配置JS文件中跳转方式：
this.props.navigation.navigate('Second',{'data':'haha'});

参数的传递

实现导航器之间的传递参数就应该在上一级页面导航器中定义一个参数，然后在子页面或者下级页面接收完成传递。
如果要从前个页面传递数据：
1.更改上面跳转步骤2中的点击按钮的方法如下，这种跳转适合在路由配置页面跳转：

onPress={() => navigate('Chat',{user : 'XiaoNiu'})}

2.在接受页面的render 方法中定义如下，这个params 不能随意取名字

const { params } = this.props.navigation.state;

3.使用直接{ params.user} 就可以了

4.如果要传递参数来设置下一界面的标题可以按如下操作，但是要注意，在配置const SimpleApp = StackNavigator({。。。。。}）里面对应的页面就不要设置headertitle 了，那个地方的优先级高，设置了传过去没效果。
a.传参：

 onPress={() =>navigate('Chat' ,{user:'我是受业的数据'})}

b.接受处理
使用一、在接受页面的类中render 函数前执行：

  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });

使用二、在Render里渲染的时候，通过

1.先声明常量
  const { params } = this.props.navigation.state;

2.调用 params.user   使用（不能随意取名字）

也可以使用这样的方式跳转:

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

goBack使用

回退到指定界面，如果什么都不传，回退到上一个界面，传null，回退到任意界面。传key，可以回退到指定界面。例如：
this.props.navigation.goBack();
this.props.navigation.goBack(null);
this.props.navigation.goBack('Profile');

标题的扩展

const SimpleApp = StackNavigator({
Home: { screen: HomeScreen,
navigationOptions:{
headerTitle:'详情',
headerBackTitle:null,
} },

上面这个 headerTitle 会覆盖之前的设置的标题，还有更多属性扩展如下：

navigationOptions:({navigation,screenProps}) => ({

    // StackNavigator 属性部分

    // title:'Test1', 同步设置导航和tabbar文字,不推荐使用
    headerTitle:'aaa', // 只会设置导航栏文字,
    // header:{}, // 可以自定义导航条内容，如果需要隐藏可以设置为null
    // headerBackTitle:null, // 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
    // headerTruncatedBackTitle:'', // 设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。
    // headerRight:{}, // 设置导航条右侧。可以是按钮或者其他。
    // headerLeft:{}, // 设置导航条左侧。可以是按钮或者其他。
    headerStyle:{
        backgroundColor:'#ff00FC',
        elevation:0
    }, // 设置导航条的样式。如果想去掉安卓导航条底部阴影可以添加elevation: 0,iOS去掉阴影是。
    headerTitleStyle:{
        fontSize:30,
        color:'white'
    }, // 设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了
    // headerBackTitleStyle:{}, // 设置导航条返回文字样式。
    // headerTintColor:'green', // 设置导航栏文字颜色。总感觉和上面重叠了。
    gesturesEnabled:true, // 是否支持滑动返回收拾，iOS默认支持，安卓默认关闭


    // TabNavigator 属性部分

    // title:'', 同上
    tabBarVisible:true, // 是否隐藏标签栏。默认不隐藏(true)
    tabBarIcon: (({tintColor,focused}) => {
        return(
            <Image
                source={!focused ? ShiTuIcon : ShiTuIcon}
                style={[{height:35,width:35 }, {tintColor: tintColor}]}
            />
        )
    }), // 设置标签栏的图标。需要单独设置。
    tabBarLabel:'XX', // 设置标签栏的title。推荐这个方式。
})

将需要跳转的页面注册在这里 StackNavigator注册下，全局才可以跳转

导航配置

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

navigationOptions：配置StackNavigator的一些属性。

title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，所以不推荐使用这个方法。
header：可以设置一些导航的属性，当然如果想隐藏顶部导航条只要将这个属性设置为null就可以了。
headerTitle：设置导航栏标题，推荐用这个方法。
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。（上个页面的标题过长，导致显示不下，所以改成了短一些的。）
headerRight：设置导航条右侧。可以是按钮或者其他。
headerLeft：设置导航条左侧。可以是按钮或者其他。
headerStyle：设置导航条的样式。背景色，宽高等。如果想去掉安卓导航条底部阴影可以添加elevation: 0，iOS下用shadowOpacity: 0。
headerTitleStyle：设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了。在安卓上会遇到，如果左边有返回箭头导致文字还是没有居中的问题，最简单的解决思路就是在右边也放置一个空的按钮。
headerBackTitleStyle：设置导航条返回文字样式。
headerTintColor：设置导航栏文字颜色。总感觉和上面重叠了。
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
gestureResponseDistance：对象覆盖触摸从屏幕边缘开始的距离，以识别手势。它需要以下属性：
horizontal - number - 水平方向的距离默认为25。
vertical - number - 垂直方向的距离默认为135。
// 设置滑动返回的距离
gestureResponseDistance:{horizontal:300},
注：beta13新出的东西，挺有意思，以后可以手动控制返回了

导航视觉效果

mode：定义跳转风格。

card：使用iOS和安卓默认的风格。
modal：iOS独有的使屏幕从底部画出。类似iOS的present效果
headerMode：边缘滑动返回上级页面时动画效果。

float：iOS默认的效果，可以看到一个明显的过渡动画。
screen：滑动过程中，整个页面都会返回。
none：没有动画。
cardStyle：自定义设置跳转效果。

transitionConfig：自定义设置滑动返回的配置。
onTransitionStart：当转换动画即将开始时被调用的功能。
onTransitionEnd：当转换动画完成，将被调用的功能。

path：路由中设置的路径的覆盖映射配置。
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件。
initialRouteParams：初始路由的参数。

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

属性的使用方式

headerRight:(
        <Text style={{color:'red',marginRight:20}} onPress={()=>navigation.state.params.navigatePress()}>我的</Text>
    ),
tabBarOptions: {
        style: {
            height:49
        },
        activeBackgroundColor:'white',
        activeTintColor:'#4ECBFC',
        inactiveBackgroundColor:'white',
        inactiveTintColor:'#aaa',
        showLabel:false,

注意里面的navigation.state.params.navigatePress()这句代码，这个可以调用另一个类的方法。比较神奇的！！
当然，要注意上面的写法有所改变：

navigationOptions:({navigation,screenProps})=>({})

页面跳转传递参数与回传

navigate('Detail',{
                   title:'图片详情',
                   url:item.url,
                   });

Detail：在StackNavigator中注册的页面，需要一一对应，才能跳转到相应的页面
title：在跳转的页面可以通过this.props.navigation.state.params.title获取到这个参数。当然这个参数可以随便填写，都可以通过this.props.navigation.state.params.xxx获取。

回调传参

navigate('Detail',{
// 跳转的时候携带一个参数去下个页面
callback: (data)=>{
console.log(data); // 打印值为：'回调参数'
}
});
const {navigate,goBack,state} = this.props.navigation;
// 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
state.params.callback('回调参数');
goBack();

具体看我下面的代码:

 <Button onPress={() => navigate('Chat', {
            boom: this.state.boom,
            callback: (data) => {
              this.setState({
                boom: data,
              })
            }
          }
          )}
          title="Go Chat"
        />

接受页面的代码如下：

export class ChatScreen extends Component {

  // static navigationOptions = {
  //   title: 'Chat',
  // };
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.boom}`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text onPress={() => { navigate('HaHa', { where: '我来至远方' }) }}>Chat with Lucy{params.boom}{}</Text>
        <Text onPress={() => this.haha()}>热土体坛y{params.boom}{}</Text>
      </View>
    );
  }
  haha(){
    const {navigate,goBack,state} = this.props.navigation;
    // 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
    state.params.callback('nima ');
    goBack();
  }

}

使用的常见问题：

1.使用StackNavigator(RouteConfigs, StackNavigatorConfig)两个属性顺序问题：

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Detail: {
    screen: DetailPage,
  },

},{
  stackNavigatorConfig: ({
    screen:RecordPage,
    initialRouteName: 'Record',
    initialRouteParams: {
      data: 'haha'
    },
    navigationOptions: {
      headerTintColor: 'green'
    },
});

如果把这个{stackNavigatorConfig}放在前面就要添加一个首屏的属性 screen:RecordPage, 目前验证的initialRouteName: 'Record',属性不好用，

自定义标题栏

两种方案：
1.node_modules -- react-navigation -- src -- views -- Header.js 更改
2.另外一种方式就是，在navigationOptions中设置headerTitleStyle的alignSelf为 ' center '即可解决。

去除返回键文字显示

【node_modules -- react-navigation -- src -- views -- HeaderBackButton.js】的91行代码处，修改为如下即可。

动态设置头部按钮事件：

当我们在头部设置左右按钮时，肯定避免不了要设置按钮的单击事件，但是此时会有一个问题，navigationOptions是被修饰为static类型的，所以我们在按钮的onPress的方法中不能直接通过this来调用Component中的方法。如何解决呢？在官方文档中，作者给出利用设置params的思想来动态设置头部标题。那么我们可以利用这种方式，将单击回调函数以参数的方式传递到params，然后在navigationOption中利用navigation来取出设置到onPress即可：

解决快速点击多次跳转

当我们快速点击跳转时，会开启多个重复的界面，如何解决呢。其实在官方git中也有提示，解决这个问题需要修改react-navigation源码：
找到scr文件夹中的addNavigationHelpers.js文件,替换为如下文本即可：

export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {  
  // 添加点击判断  
  let debounce = true;  
  return {  
      ...navigation,  
      goBack: (key?: ?string): boolean =>  
          navigation.dispatch(  
              NavigationActions.back({  
                  key: key === undefined ? navigation.state.key : key,  
              }),  
          ),  
      navigate: (routeName: string,  
                 params?: NavigationParams,  
                 action?: NavigationAction,): boolean => {  
          if (debounce) {  
              debounce = false;  
              navigation.dispatch(  
                  NavigationActions.navigate({  
                      routeName,  
                      params,  
                      action,  
                  }),  
              );  
              setTimeout(  
                  () => {  
                      debounce = true;  
                  },  
              500,  
              );  
              return true;  
          }  
          return false;  
      },  
    /** 
     * For updating current route params. For example the nav bar title and 
     * buttons are based on the route params. 
     * This means `setParams` can be used to update nav bar for example. 
     */  
    setParams: (params: NavigationParams): boolean =>  
      navigation.dispatch(  
        NavigationActions.setParams({  
          params,  
          key: navigation.state.key,  
        }),  
      ),  
  };  
}

底部导航

title - Tab标题，可用作 headerTitle 和 tabBarLabel 回退标题
tabBarVisible - Tab的是否可见，没有设置的话默认为 true
tabBarIcon - Tab的icon组件，可以根据 {focused: boolean, tintColor: string} 方法来返回一个icon组件
tabBarLabel - Tab中显示的标题字符串或者组件，也可以根据 { focused: boolean, tintColor: string } 方法返回一个组件
TabNavigatorConfig

tabBarComponent - Tab选项卡组件，有 TabBarBottom 和 TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop 。
TabBarTop - 在页面的顶部
TabBarBottom - 在页面的底部
tabBarPosition - Tab选项卡的位置，有 top 或 bottom 两个值
swipeEnabled - 是否可以滑动切换Tab选项卡
animationEnabled - 点击Tab选项卡切换界面是否需要动画
lazy - 是否懒加载页面
initialRouteName - 初始显示的Tab对应的页面路由名称
order - 用路由名称数组来表示Tab选项卡的顺序，默认为路由配置顺序
paths - 路径配置
backBehavior - androd点击返回键时的处理，有 initialRoute 和 none 两个值
initailRoute - 返回初始界面
none - 退出
tabBarOptions - Tab配置属性，用在 TabBarTop 和 TabBarBottom 时有些属性不一致：
用于 TabBarTop 时：
activeTintColor - 选中的文字颜色
inactiveTintColor - 未选中的文字颜色
showIcon - 是否显示图标，默认显示
showLabel - 是否显示标签，默认显示
upperCaseLabel - 是否使用大写字母，默认使用
pressColor - android 5.0以上的MD风格波纹颜色
pressOpacity - android 5.0以下或者iOS按下的透明度
scrollEnabled - 是否可以滚动
tabStyle - 单个Tab的样式
indicatorStyle - 指示器的样式
labelStyle - 标签的样式
iconStyle - icon的样式
style - 整个TabBar的样式
用于 TabBarBottom 时：
activeTintColor - 选中Tab的文字颜色
activeBackgroundColor - 选中Tab的背景颜色
inactiveTintColor - 未选中Tab的的文字颜色
inactiveBackgroundColor - 未选中Tab的背景颜色
showLabel - 是否显示标题，默认显示
style - 整个TabBar的样式
labelStyle - 标签的样式
tabStyle - 单个Tab的样式
底部Tab导航示例

TabNavigator ，即是Tab选项卡，类似于原生 android 中的 TabLayout ，它的构造函数：

TabNavigator(RouteConfigs, TabNavigatorConfig)
api和 StackNavigator 类似，参数 RouteConfigs 是路由配置，参数 TabNavigatorConfig是Tab选项卡配置。

RouteConfigs

路由配置和 StackNavigator 中是一样的，配置路由以及对应的 screen 页面， navigationOptions 为对应路由页面的配置选项：

import React, {Component} from 'react';
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";
import HomeScreen from "./index18/HomeScreen";
import NearByScreen from "./index18/NearByScreen";
import MineScreen from "./index18/MineScreen";
import TabBarItem from "./index18/TabBarItem";
export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        );
    }
}

const TabRouteConfigs = {
    Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '首页',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_homepage_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected_2x.png')}
                />
            ),
        }),
    },
    NearBy: {
        screen: NearByScreen,
        navigationOptions: {
            tabBarLabel: '附近',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_merchant_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected_2x.png')}
                />
            ),
        },
    }
    ,
    Mine: {
        screen: MineScreen,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_mine_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected_2x.png')}
                />
            ),
        },
    }
};
const TabNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    }
};
const StackNavigatorConfigs = {
    initialRouteName: 'Tab',
    navigationOptions: {
        title: '标题',
        headerStyle: {backgroundColor: '#5da8ff'},
        headerTitleStyle: {color: '#333333'},
    }
};
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);


顶部Tab选项卡示例

import React, {Component} from "react";
import {StackNavigator, TabBarTop, TabNavigator} from "react-navigation";
import HomeScreen from "./index18/HomeScreen";
import NearByScreen from "./index18/NearByScreen";
import MineScreen from "./index18/MineScreen";
export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        );
    }
}

const TabRouteConfigs = {
    Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '首页',
        }),
    },
    NearBy: {
        screen: NearByScreen,
        navigationOptions: {
            tabBarLabel: '附近',
        },
    }
    ,
    Mine: {
        screen: MineScreen,
        navigationOptions: {
            tabBarLabel: '我的',
        },
    }
};
const TabNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarTop,
    tabBarPosition: 'top',
    lazy: true,
    tabBarOptions: {}
};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    }
};
const StackNavigatorConfigs = {
    initialRouteName: 'Tab',
    navigationOptions: {
        title: '标题',
        headerStyle: {backgroundColor: '#5da8ff'},
        headerTitleStyle: {color: '#333333'},
    }
};
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

ReactNavigation导航使用汇总
react-navigation使用 facebook前一段时间开始推荐使用react-navigation，并且...
流水账式ReactNative实战一：ReactNavigati
ReactNavigation是react社区比较流行的导航库，完全用js编写，github地址：https://...
路由1navigation-堆栈导航
推荐官网 https://reactnavigation.org/ native 路由介绍这里介绍三种导航堆栈...
05三方库--001--react-navigation
[TOC] https://reactnavigation.org[https://reactnavigation...
Web导航设计学习
导航:信息分类汇总目录的超链接集合。 1、导航的重要性：快捷、清晰、易理解，使用户知道何去何从。 2、（1）对网站...
React-Navigation(一)，参照官网用法记录
附上官网的文档：https://reactnavigation.org/docs/intro/ 使用注意！所有被n...
关于导航栏和状态栏
两篇文章了解 iOS状态栏使用总结【iOS 开发】Status Bar 状态栏设置汇总补充：当导航栏设为透明的时...
react-native - 相关链接
React Navigationhttps://reactnavigation.org ECMAScript 6 ...
iOS导航栏使用总结
iOS导航栏使用总结 iOS导航栏使用总结
JS 资料
React Navigation: https://reactnavigation.org/docs/intro/...