React Navigation Tab.Screen 将组件设置为名称

Question

在使用react navigation包时，我想做的是下面的事情。文档允许以下内容：

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

希望对您有所帮助。

React Navigation Tab.Screen 将组件设置为名称

React Navigation Tab.Screen set Component as name

react-native

react-navigation