React-Navigation V2 使用教程 (二) createBottomTabNavigator

createBottomTabNavigator

屏幕底部的一个简单标签栏，可让您在不同的路线之间切换。路由被懒惰地初始化 - 它们的屏幕组件在首次聚焦之前不会被安装。

使用

import { createBottomTabNavigator } from 'react-navigation';

示例

继续使用我们上节的代码，如果没有，可以重新建立两个页面文件HomeScreen,DetailsScreen

/**
 * Created by 卓原 on 2018/7/4.
 *
 */

import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';
import HomeScreen from "./page/HomeScreen";
import DetailsScreen from "./page/DetailsScreen";


const RootStack = createStackNavigator({
    Home: {
        screen: HomeScreen,

    },
    Details: {
        screen: DetailsScreen,

    }
}, {
    /* 主屏幕的标题配置现在在这里 */
    //headerMode: 'none',
    navigationOptions: ({navigation}) => ({
        title: navigation.state.routeName,
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    })
});

const BottomTabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Details: DetailsScreen

});

export default BottomTabNavigator;

自定义外观

类似于自定义stack navigator的方式 - 初始化选项卡导航器时可以设置一些属性，可以在navigationOptions中按屏幕自定义其他属性。
以下示例需要react-native-vector-icons,如果没有可以返回<Image />

const BottomTabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Details: DetailsScreen
}, {
    navigationOptions: ({navigation}) => ({
        tabBarIcon: ({focused, tintColor}) => {
            const {routeName} = navigation.state;
            let iconName;
            if (routeName === 'Home') {
                iconName = `ios-home${focused ? '' : '-outline'}`;
            } else if (routeName === 'Details') {
                iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            // 在此处可以返回任何组件！
            // 我们通常使用react-native-vector-icons中的图标组件
            return <Ionicons name={iconName} size={25} color={tintColor}/>;
        },
    }),
    tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
    },
});

tabBarIcon是一个给定焦点状态和tintColor的函数。
如果您在配置中进一步查看，您将看到tabBarOptions和activeTintColor以及inactiveTintColor。
这些默认为iOS平台默认值，但您可以在此处更改它们。
传递给tabBarIcon的tintColor是活动的还是非活动的，具体取决于聚焦状态（聚焦是活动的）。

在标签之间跳转

this.props.navigation.navigate('Settings') 和StackNavigator用法一样

做一个完整的导航

在现有代码基础上，新建一个SettingsPage的页面。

const BottomTabNavigator = createBottomTabNavigator({
    ...
})

const RootStack = createStackNavigator({
    BottomTab: {
        screen: BottomTabNavigator,
        navigationOptions: {
            header: null,
        }
    },
    Settings: {
        screen: SettingsPage
    }
});

完整代码:

/**
 * Created by 卓原 on 2018/7/4.
 *
 */

import React from 'react';
import {
    View,
    Text,
    Button,
} from 'react-native';

export default class SettingsPage extends React.Component {

    constructor(props) {
        super(props);

    }

    componentWillUnmount() {
        console.log(' SettingsPage componentWillUnmount')
    }

    render() {

        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Settings Page</Text>
                <Button title='go to deatils' onPress={() => this.props.navigation.navigate('Details')}/>
            </View>
        );
    }
}

/**
 * Created by 卓原 on 2018/7/4.
 *
 */
import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons';
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';
import HomeScreen from "./page/HomeScreen";
import DetailsScreen from "./page/DetailsScreen";
import SettingsPage from "./page/SettingsPage";


const BottomTabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Details: DetailsScreen
}, {
    navigationOptions: ({navigation}) => ({
        tabBarIcon: ({focused, tintColor}) => {
            const {routeName} = navigation.state;
            let iconName;
            if (routeName === 'Home') {
                iconName = `ios-home${focused ? '' : '-outline'}`;
            } else if (routeName === 'Details') {
                iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            // 在此处可以返回任何组件！
            // 我们通常使用react-native-vector-icons中的图标组件
            return <Ionicons name={iconName} size={25} color={tintColor}/>;
        },
    }),
    tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
    },
});

const RootStack = createStackNavigator({
    HomeTab: {
        screen: BottomTabNavigator,
        navigationOptions: {
            header: null,
        }
    },
    Settings: {
        screen: SettingsPage
    }
}, {
    /* 主屏幕的标题配置现在在这里 */
    //headerMode: 'none',
    navigationOptions: ({navigation}) => ({
        title: navigation.state.routeName,
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    })
});


export default RootStack;

API

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig)

RouteConfigs

route configs对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么，请参阅堆栈导航器中的示例。参数同createStackNavigator一致。

createStackNavigator({
  // 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,
});

BottomTabNavigatorConfig

• initialRouteName - 首次加载时初始route路径的routeName。.
• order - routeNames数组，用于定义选项卡的顺序.
• paths - 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
• backBehavior - 后退按钮是否会导致选项卡切换到初始选项卡？如果是，则设置为initialRoute，否则为none。默认为initialRoute行为。.
• tabBarComponent - 可选，覆盖用作标签栏的组件
• tabBarOptions - 具有以下属性的对象：
  
  • activeTintColor - 活动选项卡的标签和图标颜色.
  • activeBackgroundColor - 活动标签的背景颜色.
  • inactiveTintColor - 非活动选项卡的标签和图标颜色.
  • inactiveBackgroundColor - 非活动选项卡的背景颜色.
  • showLabel - 是否为tab显示标签，默认为true.
  • showIcon - 是否显示选项卡的图标，默认为true.
  • style - 标签栏的样式对象.
  • labelStyle - 选项卡标签的样式对象.
  • tabStyle - 选项卡的样式对象.
  • allowFontScaling - 标签字体是否应缩放以遵守“文本大小”辅助功能设置，默认值为true.

Example:

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

如果要自定义tabBarComponent：

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = (props) => (<BottomTabBar {...props} />);

const TabScreens = createBottomTabNavigator(
  {
    tabBarComponent: props =>
      <TabBarComponent
        {...props}
        style={{ borderTopColor: '#605F60' }}
      />,
  },
);

navigationOptions 用于导航器内的屏幕

title
通用标题可以用作备用headerTitle和tabBarLabel。

tabBarVisible
true或者false显示或隐藏标签栏，如果没有设置则默认为true。

tabBarIcon
React Element或给定{ focused: boolean, tintColor: string }返回React.Node 的函数，以显示在选项卡栏中。

tabBarLabel
标签栏或React元素中显示的选项卡的标题字符串或给定的函数{ focused: boolean, tintColor: string }返回React.Node，以在标签栏中显示。未定义时，使用场景title。要隐藏，请参阅tabBarOptions.showLabel上一节。

tabBarButtonComponent
包含图标，标签和实现的React Component onPress。默认值是一个包装器TouchableWithoutFeedback，使其行为与其他触摸器相同。tabBarButtonComponent: TouchableOpacity会TouchableOpacity改用。

tabBarAccessibilityLabel
选项卡按钮的辅助功能标签。当用户点击标签时，屏幕阅读器会读取这些信息。如果您没有选项卡的标签，建议设置此项。

tabBarTestID
用于在测试中找到此选项卡按钮的ID。

tabBarOnPress
回调处理新闻事件;该参数是一个对象，其中包含：

• navigation：屏幕导航道具
• defaultHandler：tab按下的默认处理程序

官方文档