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

Question

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

他们的网站提供了这样的示例：

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