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

我认为问题在于您声明发生冲突时的变量

已更新

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

我在这里使用了三个导航器。

Answer 2

很明显，在Javascript中，所有内容都必须事先定义为值，否则它将变得不确定。就是我了因此，我只是将代码放入其中。依此类推。

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

实际的问题出在React Native本身。在其余情况下，当变量的用法未定义或为空时，并且内置函数要求将其定义为值时，它将为我们提供未定义的值错误或异常。例如，“未定义不是对象”。但是在这种情况下，该错误是由于该问题没有说明任何问题而导致的，但这仍然是一个错误。

React Native-无法在单个文件中定义多个堆叠的导航器

2 个答案: