React导航选项卡.屏幕设置组件作为名称

Question

在使用react导航包时，我想做的是:文档允许以下操作:

<Tab.Screen name="name" component={FeedScreen} />

我想实现的是:

<Tab.Screen name={<NameMarkdown />} component={FeedScreen} />

因为我想在我的应用程序中呈现markdown作为选项卡的名称

有办法解决这个问题吗?

Answer 1

name prop只接受屏幕的字符串名称，你不能将组件传递给name prop

要自定义标签的样式，可以这样使用

<Tab.Navigator
screenOptions={tabScreenOptions}
tabBarOptions={tabBarOptions}
>
<Tab.Screen name="name" component={FeedScreen} />

tabBarOptions = {
showLabel: false,
style: styles.tabContainer,
tabStyle: styles.tabStyle,
};

tabScreenOptions = props => {
const { route } = props;
return {
tabBarIcon: ({ focused }) => <TabIcon {...{ route, focused }} />,
};
};

const TabIcon = ({ focused, route }) => (
// Here you can use your own component according to your need
<Image
source={Images.tabs[route.name]}
style={{ tintColor: focused ? Colors.primary : Colors.white214 }}
/>
);

希望这对你有帮助。