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按下的默认处理程序