原文链接
基础部分结束了,接下来时分类指南部分。
在移动app中最普遍的导航形式也许就是基于标签(tab)的导航了。可能时屏幕底部的标签或者在header下方(甚至替换掉header)。
本文涉及到createBottomTabNavigator。你也可以使用createMaterialBottomTabNavigator 和createMaterialTopTabNavigator为你的应用添加标签。
基于tab的导航最简单的写法:
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
Home!
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
Settings!
);
}
}
export default createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
与我们自定义一个栈导航器相似,有些属性在初始化tab导航器时设置,其他的可以在每个界面的navigationOptions中自行设置。
// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createBottomTabNavigator } from 'react-navigation';
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return ;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
我们来详细分析:
tabBarIcon
navigationOptions
中的属性,所以我们可以在screen组件中使用,但是在例子中选择将其放在createBottomTabNavigator
中是为了方便的进行集中设置.tabBarIcon
是一个函数,给定了 focused
状态和 tintColor
. 如果你提前往下看了一眼配置,会看到tabBarOptions
和 activeTintColor
和 inactiveTintColor
. 传递到 tabBarIcon
中的tintColor是active的或者inactive的取决于focused
状态(focused is active).createBottomTabNavigator
更多配置.Tab之间跳转
在tab之间切换有相似的API--this.props.navigation.navigate.
import { Button, Text, View } from 'react-native';
class HomeScreen extends React.Component {
render() {
return (
Home!
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
Settings!
);
}
}
通常标签并不仅仅展示一个界面--举个栗子,在Twitter feed上,你可以点击一条推文,然后会跳转到tab内部一个包含所有回复的新页面。你可以想象成每一个tab都有分离的导航栈,这也正是在React Navigation中的模式。
import {
createBottomTabNavigator,
createStackNavigator,
} from 'react-navigation';
class DetailsScreen extends React.Component {
render() {
return (
Details!
);
}
}
class HomeScreen extends React.Component {
render() {
return (
{/* other code from before here */}
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
{/* other code from before here */}
);
}
}
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Details: DetailsScreen,
});
export default createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
},
{
/* Other configuration remains unchanged */
}
);