反应原生导航自定义标签栏图标

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);