将React Native Paper BottomNavigation与StackNavigator相结合

Question

我当前正在使用React-Native-Paper底部导航。它工作得很好。然而，下一个要求是将Stack Navigator添加到各个屏幕中。我在常规的底部栏导航上有这个功能，但无法使用React Native Paper库。

const SubjectNavigator = createStackNavigator({
Subjects: SubjectScreen,
Topics: TopicListScreen
}, {
navigationOptions: {}
});
const NavigationController = () => {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'home', title: 'Home', icon: 'home', color: '#3F51B5' },
{ key: 'subjects', title: 'Subjects', icon: 'book-open', color: '#009688' },
{ key: 'tournaments', title: 'Tournaments', icon: 'trophy', color: '#795548' },
{ key: 'videos', title: 'Video Feeds', icon: 'video', color: '#607D8B' }
]);
const renderScene = BottomNavigation.SceneMap({
home: HomeScreen,
subjects: SubjectScreen,
tournaments: TournamentScreen,
videos: VideoScreen
});
return (
<BottomNavigation
navigationState={{ index, routes }}
onIndexChange={setIndex}
renderScene={renderScene}
/>
);
};
export default NavigationController;

这样做会在subjectNavigator堆栈中尝试从一个屏幕移动到另一个屏幕时出现类似----Can't Find Variable: navigation的错误。

请帮忙！！

Answer 1

您可以创建一个堆栈导航器组件，用于每条路线。然后，传入一个initialRouteName道具。

class AppStackScreen extends React.Component {
render(){
return(
<NavigationContainer>
<Stack.Navigator initialRouteName={this.props.initialRouteName}>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Subjects"
component={SubjectScreen}
/>
</NavigationContainer>
);
}
}

然后在您的BottomNavigation中

<BottomNavigation
navigationState={this.state}
onIndexChange={this.handleIndexChange}
renderScene = {({ route, jumpTo }) => {
switch (route.key) {
case 'Home':
return <AppStackScreen initialRouteName="Home" jumpTo={jumpTo} />;
break;
case 'Subjects':
return <AppStackScreen initialRouteName="Subjects" jumpTo={jumpTo} />;
break;