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

是的，你可以：

<template v-for="(obj, index) in originalData">
    <template v-if="index == 0 || (index >= 1 && obj.valueA !== originalData[index - 1].valueA)">
        {{ obj.valueA }}
    </template>
</template>

或者：

<template>

Answer 2

尽管获得最多投票的答案是正确的，但是也许您不想使用以“ -outline”图标版本结尾的解决方案，并且希望使用其他图标，所以：

重点更改图标（标准矢量）：

tabBarIcon: ({ tintColor, focused }) => (
    <Ionicons name={focused ? 
                    'ios-home' : 
                    'ios-home-outline'} 
              size={26} style={{ color: tintColor }} />
),

在出现以下情况时更改图标（使用您要使用的任何图像）：

tabBarIcon: ({ focused }) => {
        const iconimg = focused  ? 
              require('../active.png')  : 
              require('../inactive.png')
        return (
            <Image 
                source={iconimg}
                style={styles.tabIcon}
            />
        )
    }

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

2 个答案: