React-Native：使用 JSX 时 React 必须在范围内

Question

我有一个 navigation.js，其中 return 是 SwitchNavigator... 我想将 TabIcon 放在其中一个屏幕中......但我不能在屏幕内这样做，即

static navigationOptions = () => ({
header: null,
tabBarLabel: 'Orders',

}); 因为我有一个嵌套的选项卡，所以我没有可以执行此操作的屏幕....这是我的代码

navigation.js

const AppStack = TabNavigator({
  //ORDER TAB----->>>>
orders: {
  navigationOptions: {
    tabBarLabel: 'Orders',
  },
         screen: TabNavigator({
           navigationOptions: {
             tabBarLabel: 'Orders',
             tabBarIcon: ({ tintColor }) => {
             return <Icon name="shopping-cart" size={20} color={tintColor} />;
             }
           },
              awaitingScreen: {
                 screen: StackNavigator({
                   awaiting: { screen: AwaitingScreen },
                   awaitingorderdetail: { screen: AwaitingDetailScreen }
                 })
               },
               confirmedscreen: {
                  screen: StackNavigator({
                  confirmed: { screen: ConfirmedScreen },
                  confirmedorderdetail: { screen: ConfirmedDetailScreen }
                })
              },

         }, {
           tabBarOptions: {
               activeTintColor: '#415041',  // Color o f tab when pressed
               inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
               showIcon: 'true', // Shows an icon for both iOS and Android
               //showLabel: (Platform.OS !== 'android'), //No label for Android
               lazy: true,
               animationEnabled: false,
               indicatorStyle: {
                borderBottomColor: '#f5e9dd',
                borderBottomWidth: 2,
              },
               labelStyle: {
                 fontSize: 10,
                 color: 'white',
                 fontFamily: 'NeutraText-Book'
               },
               style: {
                 backgroundColor: '#415041',
                 }
               }
         }
       )
 },
 //PAYMENT TAB---->>>
 payments: { screen: PaymentScreen },
 //CUSTOMER TAB----->>
 customers: { screen: CustomerScreen },
 //MESSAGES TAB----->>
 messages: { screen: MessageScreen },

//backBehavior: 'none',
},
{
headerMode: 'none',       // I don't want a NavBar at top
tabBarPosition: 'bottom', // So your Android tabs go bottom
swipeEnabled: false,
lazy: true,
animationEnabled: false,
tabBarOptions: {
    activeTintColor: '#415041',  // Color o f tab when pressed
    inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
    showIcon: 'true', // Shows an icon for both iOS and Android
    //showLabel: (Platform.OS !== 'android'), //No label for Android
    labelStyle: {
      fontSize: 8,
      margin: 0,
      padding: 0,
      fontFamily: 'NeutraText-Book'
    },
    indicatorStyle: {
     borderBottomColor: '#f5e9dd',
     borderBottomWidth: 2,
   },
    style: {
      backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
      }
    }
  });
const AuthStack = TabNavigator({
  selectadmin: { screen: SelectAdminScreen },
  otp: { screen: OtpScreen },
  password: { screen: PasswordScreen },
  pin: { screen: PinScreen }
},
{
  navigationOptions: {
    tabBarVisible: false
  },
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  lazy: true,
  animationEnabled: false,
  //backBehavior: 'none',
  }
);

export default SwitchNavigator(
  {
    AuthLoading: AppLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

现在我想在里面导入这个导航器 App.js

喜欢

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
          <SwitchNavigator />
      </View>

    );
  }
}

但我不能这样做，因为我不能 return 没有 React 的 JSX，那么有什么解决方法吗？我可以在我的 App.js 中声明所有这些，但这是我最后的选择，因为它会使我的代码变得混乱。

return <Icon name="shopping-cart" size={20} color={tintColor}

returnReact 必须在范围内

Answer 1

确保始终在每个包含 jsx 的文件中导入 React：

import React from 'react';

该错误表明您忘记在包含 jsx 的文件中执行此操作。

React-Native：使用 JSX 时 React 必须在范围内

React-Native: React must be in scope when using JSX

reactjs

react-native

react-navigation