无法在反应中添加多个孩子

Question

当我尝试在底部选项卡中添加图标时 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/

Answer 1

检查你的样品：

1. screenOptions 是 Navigator 的一个属性
2. 每个左括号都有一个右括号

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