javascript - 如何使用 createBottomTabNavigator 为每个选项卡使用不同的图标？

Question

我正在为我的项目使用 React Native Navigation v2。我正在尝试使用 createBottomTabNavigator 设置两个不同的 IonIcons。

他们的 site举个这样的例子:

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 <Ionicons name={iconName} size={25} color={tintColor} />;
  },
}),

但对我来说，这似乎很乏味。我可以在组件本身中定义 IonIcon 吗？ 如何使用 React Native Navigation v2 单独定义符号？

Answer 1

是的，你可以:

class HomeComponent extends Component {
    static navigationOptions = {
        tabBarIcon: ({ focused, tintColor }) => {
            const iconName = `ios-information-circle${focused ? '' : '-outline'}`;
            return <Ionicons name={iconName} size={25} color={tintColor} />;
        },
    };

    // ...
}

或者:

const tabs = createBottomTabNavigator({
    Home: {
        screen: HomeComponent,
        path: '/',
        navigationOptions: {
            tabBarIcon: ({ focused, tintColor }) => {
                const iconName = `ios-information-circle${focused ? '' : '-outline'}`;
                return <Ionicons name={iconName} size={25} color={tintColor} />;
            },
        },
    },
    // ...
});