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,如果没有可以返回
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 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 (
1, alignItems: 'center', justifyContent: 'center'}}>
Settings Page
);
}
}/**
* 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 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) => (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按下的默认处理程序
官方文档