Вкладка навигации React.Экран, задающий компоненту имя

#react-native #react-navigation

#реагировать-родной #реагировать-навигация

Вопрос:

Что я хочу сделать, так это следующее при использовании пакета навигации react. Документы допускают следующее:

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

чего я хочу добиться, так это:

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

потому что я хочу отобразить markdown как имя вкладки в моем приложении.

есть ли способ решить эту проблему?

Ответ №1:

Реквизит name принимает только строковое имя экрана. вы не можете передать компонент в реквизит name.

Чтобы настроить стиль вашей вкладки, вы можете использовать ее следующим образом

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

Надеюсь, это вам поможет.