React Navigation - TabNavigato
使用TabRouter轻松设置带有多个选项卡的屏幕。
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
定义API
TabNavigator(RouteConfigs, TabNavigatorConfig)
RouteConfigs
路由配置对象是从路由名称到路由配置的映射，它告诉导航器该路由呈现什么，参见StackNavigator的示例。
TabNavigatorConfig
-
tabBarComponent- 用作标签栏的组件，例如TabBarBottom（这是iOS上的默认设置），TabBarTop（这是Android上的默认设置）。 -
tabBarPosition- 标签栏的位置，可以是top
或bottom。 -
swipeEnabled- 是否允许在屏幕之间滑动。 -
animationEnabled- 是否允许tab改变触发屏幕滑动动画。 -
configureTransition- 一个函数，传递currentTransitionProps和nextTransitionProps，返回一个配置对象，描述tabs之间的动画。 -
initialLayout- 可以传递包含初始height和width的可选对象，以防止react-native-tab-view呈现中的一个帧延迟。 -
tabBarOptions- 配置标签栏，见下文。
几个选项被传递给底层路由器来修改导航逻辑：
-
initialRouteName- 第一次加载时初始选项卡路由的路由名称。 -
order- 定义选项卡顺序的routeNames数组。 -
path- 提供routeName到路径配置的映射，覆盖routeConfigs中设置的路径。 -
backBehavior- 后退按钮是否应该使制表符切换到初始选项卡？如果是，则设置为initialRoute，否则no。默认为initialRoute行为。
tabBarOptions for TabBarBottom (iOS上的默认标签栏)
-
activeTintColor- 选中ab的标签和图标颜色。 -
activeBackgroundColor- 选中tab的背景颜色。 -
inactiveTintColor- 初始化tab的标签和图标颜色。 -
inactiveBackgroundColor- 初始化tab的背景颜色。 -
showLabel- 是否显示标签，默认为true。 -
style- 标签栏的样式对象。 -
labelStyle- 选项卡标签的样式。 -
tabStyle- 选项卡的样式。 -
allowFontScaling- 标签字体大小是否以可访问性设置缩放文本大小，默认为true。
example:
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
tabBarOptions for TabBarTop (Android上的默认标签栏)
-
activeTintColor- 选中的tab标签和图标颜色。 -
inactiveTintColor- 出事的tab的标签和图标颜色。 -
showIcon- 是否显示标签图标，默认为false。 -
showLabel- 是否显示标签，默认为true。 -
upperCaseLabel- 是否使标签大写，默认为true。 -
pressColor- 波纹颜色（仅适用于Android> = 5.0）。 -
pressOpacity- 按下标签的不透明度（iOS和Android <5.0）。 -
scrollEnabled- 是否启用可滚动选项卡。 -
tabStyle- 选项卡的样式对象。 -
indicatorStyle- 选项卡指示器的样式对象（选项卡底部的行）。 -
labelStyle- 选项卡标签的样式对象。 -
iconStyle- 选项卡图标的样式对象。 -
style- 标签栏的样式对象。 -
allowFontScaling-标签字体大小是否以可访问性设置缩放文本大小，默认为true。
Example:
tabBarOptions: {
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: 'blue',
},
}
屏幕导航选项(Screen Navigation Options)
title
可以用作headerTitle和tabBarLabel的后退的通用标题。
tabBarVisible
显示或隐藏标签栏是true或false，默认为true。
swipeEnabled
启用或禁用在选项卡之间滑动
tabBarIcon
React元素或方法给定{focused：boolean，tintColor：string}的函数返回一个React.Node，以显示在标签栏中。
tabBarLabel
显示在标签栏或React元素中的标签字符串或给定{focused：boolean，tintColor：string}的函数返回一个React.Node，以在标签栏中显示。未定义时，使用场景title。要隐藏，请参阅上一节中的tabBarOptions.showLabel。
tabBarOnPress
回调处理点击事件;参数是一个对象，其中包含：
-
previousScene：{route，index}这是我们要离开的场景 - ·scene：{route:index}` that was tapped.
-
jumpToIndex可以为您执行导航方法
在转换到下一个场景之前添加一个自定义逻辑（被点击的）是有用的。
Navigator Props
由TabNavigator（...）创建的导航器组件采用
props:
-
screenProps- 将其他选项传递给子屏幕和导航选项，例如：
const TabNav = TabNavigator({
// config
});
<TabNav
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
