React Native - невозможно определить несколько стековых навигаторов в одном файле

Question

index.js

AppRegistry.registerComponent(appname, () => App);

App.js

const App = createStackNavigator({route_X : {screen : X}});
const X = createStackNavigator(...);
module.exports = App;

Из приведенного выше кода я получаю эту ошибку.

Компонент для маршрута 'route_X 'должен быть компонентом реакции

Если я помещу X в другой файл и импортирую его, он работает нормально.Я что-то пропустил?

Answer 1

Очевидно, что в Javascript все должно иметь значение, определенное ранее, иначе оно станет неопределенным.Это на мне.Поэтому я просто добавляю код в это.И так далее.

const X = createStackNavigator(...);
const App = createStackNavigator({route_X : {screen : X}});

Фактическая проблема в самом React Native.В остальных случаях, когда переменная не определена или обнуляется при использовании, а встроенная функция требует, чтобы она была определенным значением, это даст нам ошибку или исключение неопределенного значения.Например, «undefined не является объектом».Но в этом случае ошибка возникает из-за того, что проблема ничего не говорит об этом, но все же это ошибка.

Answer 2

как мне кажется, проблема в переменной, поскольку вы объявили конфликт

Обновлено

const tab = createMaterialTopTabNavigator({
  test: {screen: Screens.test},
},
{
  tabBarPosition: 'bottom',
  animationEnabled: false,
  tabBarOptions:
    {

      style: {
        borderTopWidth: 0.4,
        elevation: 6,
        borderColor: theme.colors.grey,
        backgroundColor: theme.colors.inverse,
      },

      activeTintColor: theme.colors.active,
      inactiveTintColor: theme.colors.grey,
      indicatorStyle: {
        borderBottomColor: theme.colors.primary,
        borderBottomWidth: 1
      },
      showIcon: true,
      showLabel: false,

    },
  })

const Drawer = createDrawerNavigator({
  tab: {screen: tab}
},{
  contentComponent: SideDrawer,
})

const test = StackNavigator({
  First: {
    screen: Screens.SplashScreen
  },
  
  drawer:{screen: Drawer},
  
}, {
  headerMode: 'none',
});

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

, поскольку я использовал здесь три навигатора.