React Native Navigation自定义Tabar图标

Question

这是否可以在标签栏中具有自定义组件（按钮或任何内容），而不是简单的图标？

我需要动态设置我的标签栏图标

this.props.navigator.setTabButton({
          tabIndex: 0,
          icon: <Icon name="heart" size={28} />  <--- not appear    
        });

，还是我们只能使用图标？有什么解决方案？

Answer 1

是的，这是可能的。我将解决方案分享为以下代码：

const renderNav = (routeName, focused) => {
    return (
        <View style={{
            flex: 1,
            width: 90,
            justifyContent: 'center',
            alignItems: 'center',
            borderTopColor: StylesGeneric.COLORS.primary,
            borderTopWidth: focused ? 4 : 0,
        }}>
            <Text
                style={[StylesGeneric.STYLES.footerText]}>
                {routeName}
            </Text>
        </View>
    );
};
const customTabs = ({navigation}) => ({
    tabBarIcon: ({focused}) => {
        const {routeName} = navigation.state;
        if (routeName === 'Home') {
            return renderNav('Home', focused);
        } else if (routeName === 'Profile') {
            return renderNav('Profile', focused);
        } else if (routeName === 'ProfileOther') {
            return renderNav('ProfileOther', focused);
        }
    },
});
const nav = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
        },
        Profile: {
            screen: Profile,
        },
        ProfileOther: {
            screen: ProfileOther,
        },
    },
    {
        defaultNavigationOptions: customTabs,
        animationEnabled: true,
        swipeEnabled: true,
        tabBarPosition: 'bottom',
        initialRouteName: 'Home',
        tabBarOptions: {
            showLabel: false,
            style: {
                borderTopColor: 'transparent',
                backgroundColor: StylesGeneric.COLORS.white,
                height: StylesGeneric.FOOTER_HEIGHT,
            },
        },
    },
);
const AppContainer = createAppContainer(nav);