Question

我一直试图在底部选项卡中放置一个图标，我一直在使用版本4的react导航选项卡。我试图升级到版本5，但这是另一回事。

目标只是包括一个图标，但我只是左右失败。该文档说要将其添加到navigationOptions

HomeScreen.navigationOptions = ({navigation}) => {
    return {
    title: 'Get Me Goods',
    headerStyle: HeaderStyle.headerStyle,
    headerTintColor: HeaderStyle.headerTintColor,
    headerTitleStyle: HeaderStyle.headerTitleStyle,
    tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>,
    headerLeft: () => <MenuImage
        onPress={() => {
            // navigation.openDrawer()
            navigation.navigate('SignOut')
        }}
    />
    ,
    headerRight: () => 
        <MenuImage
            onPress={() => {
                navigation.openDrawer()
            }}
        />
    }
}

并在底部标签导航器中尝试过

const BottomTabMenu = createBottomTabNavigator(
    {
        Home: { 
            screen: Home, 
            options: {
                tabBarLabel: 'Testing',
                tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
            }
        },
        Me, 
        Search, 
        Messages, 
        Sell
    }, 
    {
        initialRouteName: 'Home'
    }   
)

我还想念什么？

Answer 1

弄清楚了，只使用了NavigationOptions而不是底部标签栏配置中的选项

const BottomTabMenu = createBottomTabNavigator(
    {
        Home: { 
            screen: Home, 
            navigationOptions: {
                tabBarLabel: 'Testing',
                tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
            }
        },
        Me, 
        Search, 
        Messages, 
        Sell
    }, 
    {
        initialRouteName: 'Home'
    }   
)

反应本机底部标签导航第4版图标问题

1 个答案: