Learn once, navigate anywhere.

React Navigation的诞生，源于React Native社区对基于Javascript的可扩展且使用简单的导航解决方案的需求

只需安装react-navigation的npm package, 就可以开始使用React Navigation了

安装react-navigation

使用 NPM 安装
npm install --save react-navigation
或者使用yarn安装
yarn add react-navigation

要开始使用React Navigation，您必须先创建一个navigator，React Navigation带有三种默认的navigator。

StackNavigator - 为应用程序提供了一种页面切换的方法，每次切换时，新的页面会放置在堆栈的顶部
TabNavigator - 用于设置具有多个Tab页的页面
DrawerNavigator - 用于设置抽屉导航的页面

StackNavigator

'use strict';
import React,{Component} from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  PixelRatio,
} from 'react-native';
//1. 导入文件
import { StackNavigator } from 'react-navigation';

//2. 编写页面
const HomeScreen = ({navigation}) =>(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            //5. 从Home页面跳转到Details页面
            <Button 
                onPress={()=>navigation.navigate('Details')}
                title='Go to Details'
            ></Button>
        </View>
    );

const Details = ()=>(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
        </View>
    );

//3.创建StackNavigator
const RootNavigator = StackNavigator({
    Home:{
        screen:HomeScreen,
        //4. 添加标题
        navigationOptions:{
            headerTitle:'home',
        },
    },
    Details:{
        screen:Details,
        navigationOptions:{
            headerTitle:'details',
        },
    }
});
export default RootNavigator;

效果图

image.png

TabNavigator

我们将在例子中使用react-native-vector-icons，如果你的项目中没有安装，请自行安装。

react-native-vector-icons ICONS是矢量图，可以直接使用图片名, 就能加载图片的第三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,
图片库
 图片库
 icons 使用

代码

'use strict';
import React,{Component} from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  PixelRatio,
} from 'react-native';
//1. 导入文件
import { createBottomTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';


//2.创建一些页面
const HomeScreen=()=>(
        <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
            <Text>HomeScreen</Text>
        </View>
    );

const ProfileScreen=()=>(
        <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
            <Text>ProfileScreen</Text>
        </View>
    );

//3. 添加TabNavigator中
const RootTabs = createBottomTabNavigator({
        Home:{
            screen:HomeScreen,
            navigationOptions:{
                //4. 创建标签
                tabBarLabel:'MyHome',
                //5 .添加图标
                tabBarIcon:({tintColor,focused})=>(
                        <Ionicons 
                            name={focused?'ios-home' : 'md-home'}
                            size={26}
                            style={focused?{ color: tintColor }:{color:'#f00'}}
                        >
                        </Ionicons>
                    ),
            },
        },
        Profile:{
            screen:ProfileScreen,
            navigationOptions:{
                tabBarLabel:'MyProfile',
                tabBarIcon:({tintColor,focused})=>(
                        <Ionicons
                            name={'ios-aperture'}
                            size={26}
                            style={{color:tintColor}}
                        >
                        </Ionicons>
                    ),
            }
        },
    });

//最后导出
export default RootTabs;

效果图

image.png

出现的几个问题

消除警告

"Method jumpToIndex is deprecated. Please upgrade your code to use jumpTo instead. Change your code from jumpToIndex(1) to `jumpTo('Parties')."

这个警告的意思是把TabNavigator替换成createBottomTabNavigator
问题解决

import { createBottomTabNavigator } from 'react-navigation';

const RootTabs = createBottomTabNavigator({...});

react-native-vector-icons 使用问题

安装时注意
npm install react-native-vector-icons --save
或者
yarn add react-native-vector-icons

注意：目前npm5存在安装新库时会删除其他库的问题，可能后面会修复导致项目无法正常运行。请尽量使用yarn代替npm操作。

执行以下命令链接原生库
react-native link react-native-vector-icons
ios配置（ios需要单独导入字体文件，安卓link完就可以用了）
ios必须要配置如果不配置会报错Unrecognized font family ‘Ionicons’
如果还是报错
我的解决方法
在node_modules目录找到react-native-vector-icons目录,删除掉，使用yarn命令重新下载，link 命令，ios配置，关闭所有服务，使用xcode安装。问题解决。

DrawerNavigator

代码

'use strict';
import React,{Component} from 'react';
352152
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  PixelRatio,
} from 'react-native';

import { DrawerNavigator } from 'react-navigation';

import Ionicons from 'react-native-vector-icons/Ionicons';


const HomeScreen=({navigation})=>(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>HomeScreen</Text>
            <Button
                 onPress={()=>(navigation.toggleDrawer())} 
                 title="Open Drawer"
            ></Button>
        </View>
    );

const ProfileScreen=()=>(
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>ProfileScreen</Text></View>
    );

const RootDrawer =DrawerNavigator({
    Home:{
        screen:HomeScreen,
        navigationOptions:{
            drawerLabel:'MyHome',
            drawerIcon:({tintColor, focused })=>(
                <Ionicons                   
                      name={'ios-home'}
                      size={20}
                      style={{ color: tintColor }}
                ></Ionicons>
                ),
        },
    },
    Profile:{
        screen:ProfileScreen,
        navigationOptions:{
            drawerLabel:'MyProfile',
            drawerIcon:({tintColor})=>(
                <Ionicons 
                    name={'ios-person'}
                    size={20}
                    style={{color:tintColor}}
                ></Ionicons>
                ),
        },
    }
});

export default RootDrawer;

效果图

点击Button会打开侧拉菜单

image.png

嵌套导航

标题仅适用于StackNavigator。 本来想切换tab页面，标题也跟着切换，折腾了半天也没做出来。官方文档说的意思是标题仅适用于StackNavigator

这个例子意思是：StackNavigator导航里面嵌套TabNavigator导航。
把StackNavigator的主页面替换成了TabNavigator两个tab页面，在tab页面点击按钮跳转到StackNavigator导航页面并携带数据。

'use strict';
import React,{Component} from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  PixelRatio,
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import { createBottomTabNavigator } from "react-navigation";

/**
* Home页面
*/
class HomeScreen extends Component{
  static navigationOptions={
    title:'Welcome',
  };

  render(){
    const { navigate } = this.props.navigation;
    return(
        <View>
            <Text>Hello, Navigation!</Text>
            <Button 
                onPress={ ()=>{navigate('Chat',{user:'Lucy'})}}
                title='Chat with Lucy'
            ></Button>
         </View>
      );
  }
}

/**
*   聊天界面
*/
class ChatScreen extends Component{

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

    render(){
        const userTitle=this.props.navigation.state.params.user;
        const {params} = this.props.navigation.state;
        return(
            <Text>{params.user}</Text>
            );
    }
}

class RecentChatsScreen extends Component{

    render(){
        return(
            <View>
                <Text>List of recent chats</Text>

                <Button
                    onPress={ () => {this.props.navigation.navigate('Chat',{user:'RecentChatsScreen'})}}
                    title='Chat with Lucy'
                ></Button>
            </View>     
            );
    }
}

class AllContactsScreen extends Component{
    render(){
        return(
            <View>
                <Text>List of all contacts</Text>

                <Button
                    onPress={ () => {this.props.navigation.navigate('Chat',{user:'AllContactsScreen'})}}
                    title='Chat with Lucy'
                ></Button>
            </View>     
            );
    }
}

/**
*   页面嵌套
*/
export const MainScreenNavigator=createBottomTabNavigator({
    Recent:{ 
        screen:RecentChatsScreen,   
        navigationOptions:{
            headerTitle:'My Chat',
        }   
    },
    All:{ 
        screen:AllContactsScreen,
        navigationOptions:{
            headerTitle:'My All',
        }
    },
});


export const SimpleApp=StackNavigator({
  HomeScreen:{
    screen:MainScreenNavigator,
    navigationOptions:{
        title:'My Chats',
        }
  },
  Chat:{
    screen:ChatScreen,
    Navigation:{
    }
  }
});



AppRegistry.registerComponent('MyApp', () => SimpleApp);

需要注意一点

点击按钮打开侧拉侧单下面这种做法是错误的。因为过时了。

<Button
      onPress={() => navigation.navigate('DrawerToggle')}
      title="Open Drawer"
    />

解决办法: 使用最新的API

 onPress={()=>(navigation.toggleDrawer())}

标题仅适用于StackNavigator。

添加右侧的按钮

'use strict';
import React,{Component} from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  PixelRatio,
  TextInput,
  //屏幕组件与标题的交互 记得导入
  ActivityIndicator,
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import { createBottomTabNavigator } from "react-navigation";

/**
* Home页面
*/
class HomeScreen extends Component{
  static navigationOptions={
    title:'Welcome',
  };

  render(){
    const { navigate } = this.props.navigation;
    return(
        <View>
            <Text>Hello, Navigation!</Text>
            <Button 
                onPress={ ()=>{navigate('Chat',{user:'Lucy'})}}
                title='Chat with Lucy'
            ></Button>
         </View>
      );
  }
}

/**
*   聊天界面
*/
class ChatScreen extends Component{
    static navigationOptions=({navigation})=>{
        console.log(navigation);
        const {state,setParams} = navigation;
        const isInfo = state.params.mode === 'info';
        const {user} = state.params;
        //添加右侧的按钮
        //动态修改标题  和  button的title
        return{
            title: isInfo ? `${user}'s Contact Info` :  `Chat with ${state.params.user}`,
            headerRight:(
                <Button
                    title={isInfo ? 'Done' : `${user}'s info`}
                    onPress={()=>{setParams({mode:isInfo?'none' : 'info'})}}
                ></Button>
                ),
        };
    };
    

    render(){
        console.log(this);
        const userTitle=this.props.navigation.state.params.user;
        const {params} = this.props.navigation.state;
        return(
            <Text>{params.user}</Text>
            );
    }
}

class RecentChatsScreen extends Component{

    render(){
        return(
            <View>
                <Text>List of recent chats</Text>

                <Button
                    onPress={ () => {this.props.navigation.navigate('Chat',{user:'RecentChatsScreen'})}}
                    title='Chat with Lucy'
                ></Button>
            </View>     
            );
    }
}

class AllContactsScreen extends Component{
    render(){
        return(
            <View>
                <Text>List of all contacts</Text>

                <Button
                    onPress={ () => {this.props.navigation.navigate('Chat',{user:'AllContactsScreen'})}}
                    title='Chat with Lucy'
                ></Button>
            </View>     
            );
    }
}

/**
*   页面嵌套
*/
export const MainScreenNavigator=createBottomTabNavigator({
    Recent:{ 
        screen:RecentChatsScreen,   
        navigationOptions:{
            headerTitle:'My Chat',
        }   
    },
    All:{ 
        screen:AllContactsScreen,
        navigationOptions:{
            headerTitle:'My All',
        }
    },
});

/**
*   屏幕组件与标题的交互
*/
class EditInfoScreen extends Component{

    static navigationOptions= ({navigation}) =>{
        // 3 获取navigation state 中 params 属性 使用解构赋值 并设置默认值
        const {params={}} = navigation.state;
        console.log(params);
        console.log(params.handleSave);
        //设置标题右侧按钮 
        let headerRight=(
            <Button 
                title='Save'
                // handleSave 是函数_handlerSave  params.handleSave才会调用函数 
                onPress={params.handleSave? params.handleSave : ()=>null}
            ></Button>
            );
        console.log(params.isSaveing);
        if(params.isSaveing){
            headerRight = <ActivityIndicator/>;
        }
        return {headerRight};
    }

    //2. 编写state属性 存放数据
    state={
        nickName:'fengxing',
    }

    componentDidMount(){
        this.props.navigation.setParams({handleSave:this._handlerSave});
        console.log(this._handlerSave);
    }

    _handlerSave= ()=>{
        console.log('_handlerSave');
        this.props.navigation.setParams({isSaveing:true});

        //saveInfo().then(()=>{
        //  this.props.navigation.setParams({isSaveing:false});
        //});
    }


    render(){
        return(
            //1. 编写组件基本内容 
            <View>
                <TextInput 
                    style={{height: 400, borderColor: 'gray', borderWidth: 1,marginTop:30}}
                    placeholder={'Nickname'}
                    onChangeText={ (nickName) => this.setState({nickName}) }
                    multiline={true}
                    value={this.state.nickName}
                >
                </TextInput>

                <Button 
                    title='点击'
                    onPress = { ()=> this.props.navigation.setParams({isSaveing:false}) }
                    >
                </Button>
            </View>
            );
    }
}


/**
*   输出的视图
*/
export const SimpleApp=StackNavigator({
  HomeScreen:{
    screen:MainScreenNavigator,
    navigationOptions:{
        title:'My Chats',
        }
  },
  Chat:{
    screen:EditInfoScreen,
    Navigation:{
    }
  }
});


AppRegistry.registerComponent('MyApp', () => SimpleApp);

内置导航器

react-navigation包含以下功能来帮助你创建导航器:

StackNavigator - 一次只渲染一个页面，并提供页面之间跳转的方法。当打开一个新的页面时，它被放置在堆栈的顶部
TabNavigator - 渲染一个选项卡，让用户可以在几个页面之间切换
DrawerNavigator - 提供一个从屏幕左侧滑入的抽屉

StackNavigator

API 定义

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs

路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由应该呈现什么。

StackNavigator({

  // For each screen that you can navigate to, create a new entry like this:
  Profile: {

    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({navigation}) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

StackNavigatorConfig

router的选项：

initialRouteName - 设置堆栈的默认页面。必须匹配RouteConfigs中的一个key。
initialRouteParams - 初始化路由的参数
navigationOptions - 用于页面的默认导航选项
paths - 用于覆盖RouteConfigs中设置的path的一个映射

视觉选项:

mode - 定义页面渲染和转换的风格：
- card - 使用标准的iOS和Android页面转换风格，此项为缺省。
- modal - 使页面从屏幕底部滑入，这是一种常见的iOS模式。只适用于iOS，在Android上不起作用。
headerMode - 定义标题该如何渲染：
- float - 渲染一个放在顶部的标题栏，并在页面改变时显示动画。这是iOS上的常见模式。
- screen - 每个页面上都有一个标题栏，标题栏与页面一起淡入淡出。这是Android上的常见模式。
- none - 没有标题栏
cardStyle - 使用这个属性覆盖或者扩展堆栈中单个Card的默认样式。
transitionConfig - 返回一个与默认页面的transitionConfig(参见类型定义)合并的对象的函数。提供的函数将传递以下参数：
- transitionProps - 新页面跳转的属性。
- prevTransitionProps - 上一个页面跳转的属性
- isModal - 指定页面是否为modal。
onTransitionStart - card跳转动画开始时要调用的函数。
onTransitionEnd - card跳转动画结束时要调用的函数。

Screen Navigation Options

`title`

可当作headerTitle的备用的字符串。此外，将用作tabBarLabel（如果嵌套在TabNavigator中）或drawerLabel（如果嵌套在DrawerNavigator中）的后备。

`header`

可以是React元素或给定了HeaderProps然后返回一个React元素的函数，显示为标题。设置为null隐藏标题。

`headerTitle`

字符串、React元素或被当作标题的React组件。默认显示title属性的值。当使用一个组件时，它会收到allowFontScaling，style和children属性。标题字符串在children中进行传递。

`headerTitleAllowFontScaling`

标题栏中标题字体是否应该缩放取决于文本大小是否可以设置。默认为true。

`headerBackTitle`

iOS上的返回按钮的文字使用的字符串，或者使用null来禁用。默认为上一个页面的headerTitle。

`headerTruncatedBackTitle`

当headerBackTitle不适合在屏幕显示时（一般是因为文字太多），返回按钮使用的标题字符串。默认是Back。

`headerRight`

显示在标题栏右侧的React元素。

`headerLeft`

用于在标题栏左侧展示的React元素或组件。当一个组件被渲染时，它会接收到很多的属性（onPress, title, titleStyle 等等， - 请检查 Header.js 的完整列表）

`headerStyle`

标题栏的样式

`headerTitleStyle`

标题栏中标题的样式

`headerBackTitleStyle`

标题栏中返回按钮标题的样式

`headerTintColor`

标题栏的色调

`headerPressColorAndroid`

material design中的波纹颜色 (仅支持Android >= 5.0)

`gesturesEnabled`

是否可以使用手势来关闭此页面。在iOS上默认为true，在Android上默认为false。

`gestureResponseDistance`

一个对象，用以覆盖从屏幕边缘开始触摸到手势被识别的距离。它具有以下属性：

horizontal - 数值型 - 水平方向的距离，默认值25
vertical - 数值型 - 垂直方向的距离，默认值135.

字符串，用来设置关闭页面的手势方向，默认（default）是从做往右，inverted是从右往左

/**
*   输出的视图
*/
export const SimpleApp=StackNavigator({
  HomeScreen:{
    screen:MainScreenNavigator,
    navigationOptions:{
        title:'My Chats',
        }
  },
  Chat:{
    screen:EditInfoScreen,
    Navigation:{
    }
  }
},{
    //定义标题该如何渲染 none 没有标题 float 淡入淡出 screen
    headerMode: 'screen',
    //弹出方式
    mode:'modal',

    navigationOptions: {
        //是否可以使用手势来关闭此页面。 在iOS上默认为true，在Android上默认为false。
        gesturesEnabled: false,
   },
    
    //
    transitionConfig:() => ({
        transitionSpec:{
            duration:300,
            easing:Easing.out(Easing.poly(4)),
            timing: Animated.timing,
        }
    })
});

TabNavigator

API 定义

TabNavigator(RouteConfigs, TabNavigatorConfig)

TabNavigatorConfig

tabBarComponent - 用作渲染tab bar的组件，例如TabBarBottom（这是iOS上的默认设置），TabBarTop（这是Android上的默认设置）。
tabBarPosition - tab bar的位置, 可选值： 'top' or 'bottom'
swipeEnabled - 是否允许滑动切换tab页
animationEnabled - 是否在切换tab页时使用动画
configureTransition - 给定currentTransitionProps和nextTransitionProps的函数，其返回一个配置对象，该对象用于描述tab页之间的动画
initialLayout - 可以传递包含初始height和width的可选对象，用以防止react-native-tab-view渲染中一个帧的延迟
tabBarOptions - 配置tab bar ，详情见下文

传递到底层路由，用于修改导航逻辑的几个选项：

initialRouteName - 第一次加载tab bar时路由的routeName
order - 定义了tab bar顺序的一个routeNames数组
paths - 提供routeName到path config的映射，它覆盖了routeConfigs中设置的path。
backBehavior - 返回按钮是否会导致tab切换到初始tab页？如果是，则设置为initialRoute，否则为none。缺省为initialRoute。

`TabBarBottom`的`tabBarOptions` (`TabBarBottom`为iOS的默认`tab bar`)

activeTintColor - 当前选中的tab bar的文本颜色和图标颜色
activeBackgroundColor - 当前选中的tab bar的背景色
inactiveTintColor - 当前未选中的tab bar的文本颜色和图标颜色
inactiveBackgroundColor - 当前未选中的tab bar的背景色
showLabel - 是否显示tab bar的文本，默认是true
style - tab bar的样式
labelStyle - tab bar的文本样式
tabStyle - tab页的样式
allowFontScaling - 文本字体大小是否可以缩放取决于该设置，默认为true。

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

`TabBarTop`的`tabBarOptions` (`TabBarTop`为Android的默认`tab bar`)

activeTintColor - 当前选中的tab bar的文本颜色和图标颜色
inactiveTintColor - 当前未选中的tab bar的文本颜色和图标颜色
showIcon - 是否显示tab bar的图标，默认是false
showLabel - 是否显示tab bar的文本，默认是true
upperCaseLabel - 是否将文本转换为大小，默认是true
pressColor - material design中的波纹颜色(仅支持Android >= 5.0)
pressOpacity - 按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
scrollEnabled - 是否允许滑动切换
tabStyle - tab页的样式
indicatorStyle - tab 页指示符的样式 (tab页下面的一条线).
labelStyle - tab bar的文本样式
iconStyle - tab bar的图标样式
style - tab bar的样式
allowFontScaling - 文本字体大小是否可以缩放取决于该设置，默认为true。

栗子:

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',
  },
}

Screen Navigation Options

`title`

可以用作headerTitle 和 tabBarLabel后备的通用标题。（headerTitle 和 tabBarLabel未设置时，就会使用title的值替代）

`tabBarVisible`

tab bar是否可见，缺省是true

`swipeEnabled`

是否允许tab页之间滑动切换，如果未设置，则使用TabNavigatorConfig的swipeEnabled选项

`tabBarIcon`

用于在tab bar中展示的React元素或一个传入{ focused: boolean, tintColor: string }返回React.Node的函数

`tabBarLabel`

用于在tab bar中展示的一个字符串或者一个传入{ focused: boolean, tintColor: string }返回React.Node的函数，如果未定义，则使用页面的title属性。如果像隐藏文本，请参阅上一小节中讲到的tabBarOptions.showLabel

`tabBarOnPress`

tab被点击时的回调函数；参数是一个对象，包含一下属性：

previousScene: { route, index } ：正在离开的页面
scene: { route, index } 被点击的页面
jumpToIndex 执行跳转操作必须的参

DrawerNavigator

使用...navigate('DrawerOpen')和...navigate('DrawerClose')打开和关闭抽屉

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

React Navigation

安装react-navigation

StackNavigator

效果图

TabNavigator

代码

效果图

出现的几个问题

DrawerNavigator

代码

效果图

嵌套导航

需要注意一点

添加右侧的按钮

内置导航器

StackNavigator

API 定义

RouteConfigs

StackNavigatorConfig

title

header

headerTitle

headerTitleAllowFontScaling

headerBackTitle

headerTruncatedBackTitle

headerRight

headerLeft

headerStyle

headerTitleStyle

headerBackTitleStyle

headerTintColor

headerPressColorAndroid

gesturesEnabled

gestureResponseDistance

TabNavigator

API 定义

TabBarBottom的tabBarOptions (TabBarBottom为iOS的默认tab bar)

TabBarTop的tabBarOptions (TabBarTop为Android的默认tab bar)

Screen Navigation Options

title

tabBarVisible

swipeEnabled

tabBarIcon

tabBarLabel

tabBarOnPress

DrawerNavigator

相关阅读更多精彩内容

友情链接更多精彩内容

`title`

`header`

`headerTitle`

`headerTitleAllowFontScaling`

`headerBackTitle`

`headerTruncatedBackTitle`

`headerRight`

`headerLeft`

`headerStyle`

`headerTitleStyle`

`headerBackTitleStyle`

`headerTintColor`

`headerPressColorAndroid`

`gesturesEnabled`

`gestureResponseDistance`

`TabBarBottom`的`tabBarOptions` (`TabBarBottom`为iOS的默认`tab bar`)

`TabBarTop`的`tabBarOptions` (`TabBarTop`为Android的默认`tab bar`)

`title`

`tabBarVisible`

`swipeEnabled`

`tabBarIcon`

`tabBarLabel`

`tabBarOnPress`