React Navigation 的使用分类指南（一）Tab navigation

原文链接

基础部分结束了，接下来时分类指南部分。

在移动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).
• 参考 API reference 获得 createBottomTabNavigator 更多配置.

Tab之间跳转

在tab之间切换有相似的API--this.props.navigation.navigate.

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

class HomeScreen extends React.Component {
  render() {
    return (
      
        Home!
         this.props.navigation.navigate('Settings')}
        />
      
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      
        Settings!
         this.props.navigation.navigate('Home')}
        />
      
    );
  }
}

为每一个tab创建一个栈导航器

通常标签并不仅仅展示一个界面--举个栗子，在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 */}
         this.props.navigation.navigate('Details')}
        />
      
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      
        {/* other code from before here */}
         this.props.navigation.navigate('Details')}
        />
      
    );
  }
}

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 */
  }
);