1

我正在努力使用包含每个 StackNavigator 的 BottomTabNavigator 的反应导航来制作视图，但它会打印错误：undefined is not an object (evaluating 'state.routes')。

我尝试制作的应用程序结构是

App.js (BottomTabNavigator)
ㄴ HomeScreen (React.Component 和初始路由)
ㄴ JumoonScreen (React.Component)
ㄴ WalletScreen (React.Component)
ㄴ ShoppingScreen (StackNavigator <- 引起的问题)

App.js 代码是：

const TabBar = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <TabBar.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === '홈') {
              return <Feather
                name='home' size={22} color={color} />;
            } else if (route.name === '주문내역') {
              return <Ionicons
                name='ios-list' size={22} color={color} />;
            } else if (route.name === '내 지갑') {
              return <SimpleLineIcons
                name='wallet' size={21} color={color} />;
            } else if (route.name === '쇼핑') {
              return <SimpleLineIcons
                name='handbag' size={22} color={color} />;
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: '#0098EB',
          inactiveTintColor: '#999999',
        }}>

        <TabBar.Screen name="홈" component={HomeScreen} />
        <TabBar.Screen name="주문내역" component={JumoonScreen} />
        <TabBar.Screen name="내 지갑" component={WalletScreen} />
        <TabBar.Screen name="쇼핑" component={ShoppingScreen} />
      </TabBar.Navigator>
    </NavigationContainer>
  );
}

从 ShoppingScreen.js 导入的 ShoppingScreen 组件是：

class FirstSubScreen extends Component {
  render() {
    return (
      <View>
        <Text>
          sample text
              </Text>
      </View>
    );
  }
}

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Stack = createStackNavigator();

    return (
      <NavigationContainer independent={true}>
        <Stack.Navigator>
          <Stack.Screen name="샘플" component={FirstSubScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

但是，如果我像这样制作 ShoppingScreen.js，它就起作用了。

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Tab = createMaterialTopTabNavigator();

    return (
      <NavigationContainer independent={true}>
        <Tab.Navigator>
          <Tab.Screen name="샘플" component={FirstSubScreen} />
        </Tab.Navigator>
      </NavigationContainer>

    );
  }
}

我的代码有什么问题？

4

1 回答 1

1

我自己解决了，通过纠正

import { createStackNavigator } from 'react-navigation-stack';

至

npm install @react-navigation/stack.

import { createStackNavigator } from '@react-navigation/stack';

感谢您的帮助。

于 2020-02-26T07:50:59.863 回答