Невозможно добавить несколько дочерних элементов в реакцию

Когда я пытаюсь добавить иконки в нижнюю вкладку https://icons.expo.fyi/ он показывает ошибку Tab.Navigator

This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.ts(2746)

я пытаюсь добавить

children: React.ReactNode;

но получил ошибку ReactNode

Property 'ReactNode' does not exist on type 'typeof React'.ts(2339)

Вот файл index.tsx

 const Tab = createBottomTabNavigator();

 function BottomTabNavigator() {
   return (
      <Tab.Navigator>
       <Tab.Screen name = "Dashboard" component = {DashboardScreen} />
       screenOptions = {({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === 'Dashboard') {
              iconName = focused
                ? 'ios-speedometer'
                : 'ios-speedometers';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list' : 'ios-list-outline';
            }
       <Tab.Screen name = "Settings" component = {TabTwoScreen} />
     </Tab.Navigator>
   );
 }

https://reactnavigation.org/docs/tab-based-navigation/

https://reactnavigation.org/docs/bottom-tab-navigator/

reactjs typescript react-native navigation children

27.11.2022 14:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проверьте свой образец:

screenOptions является свойством Navigator
Каждая открывающая скобка имеет закрывающую

function BottomTabNavigator() {
       return (
          <Tab.Navigator>
           <Tab.Screen name = "Dashboard" component = {DashboardScreen} />
           screenOptions = {({ route }) => ({ // Is property of Navigator
              tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                if (route.name === 'Dashboard') {
                  iconName = focused
                    ? 'ios-speedometer'
                    : 'ios-speedometers';
                } else if (route.name === 'Settings') {
                  iconName = focused ? 'ios-list' : 'ios-list-outline';
                } // closing brackets are missing
           <Tab.Screen name = "Settings" component = {TabTwoScreen} />
         </Tab.Navigator>
       );
     }

Это должно выглядеть так:

const Tab = createBottomTabNavigator();

function BottomTabNavigator() {
  return (
    <Tab.Navigator
      screenOptions = {({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;
          if (route.name === 'Dashboard') {
            iconName = focused ? 'ios-speedometer' : 'ios-speedometers';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'ios-list' : 'ios-list-outline';
          }
        }
      })}
    >
      <Tab.Screen name='Dashboard' component = {DashboardScreen} />
      <Tab.Screen name='Settings' component = {TabTwoScreen} />
    </Tab.Navigator>
  );
}

могу ли я задать еще один вопрос, как я могу отделить значок, он показывает только значок 1 вкладки

— 28.11.2022 05:47

Я не понимаю вопроса. Создайте новую тему и попробуйте более подробно объяснить, что вы хотите знать

— 28.11.2022 10:27

27.11.2022 16:03