Question

我有一个返回SwitchNavigator的navigation.js ... 我想把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>

    );
  }
}

但是我无法做到这一点因为我无法在没有React的情况下返回JSX，那么有什么工作吗？我可以在我的App.js中声明所有这些，但这是我的最后一个选项，因为它会使我的代码变得混乱。

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

它返回React必须在范围

Answer 1

确保始终在包含jsx：

的每个文件中导入React

import React from 'react';

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

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

1 个答案: