我在使用react导航的选项卡导航器中制作堆栈导航器时遇到问题

Question

我很难使用react导航来创建一个视图，BottomTabNavigator会包装每个StackNavigator，但它会打印错误：undefined is not an object (evaluating 'state.routes')。

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

App.js(BottomTabNavigator(
ㄴHomeScreen(React.Component和初始路由(
ㄴJumoonScreen(反应组件(
ㄴWalletScreen(React.Component(
ㄴ购物屏幕(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>
);
}
}

我的代码出了什么问题

Answer 1

我自己通过纠正解决了这个问题

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

至

CCD_ 2。

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

谢谢你的帮助。