React native 将React Native Paper BottomNavigator与StackNavigator相结合

我目前正在使用

React原生纸张

bottomNavigation。它工作得很好。但是，下一个要求是将堆栈导航器添加到各个屏幕。我在常规的底部栏导航中使用了它，但无法在React Native Paper library中使用它

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;

const SubjectNavigator=createStackNavigator({
主题：主题屏幕，
主题：主题列表屏幕
}, {
导航选项：{}
});
常量导航控制器=（）=>{
const[index，setIndex]=React.useState（0）；
常量[路由]=React.useState([
{键：'home'，标题：'home'，图标：'home'，颜色：'#3F51B5'}，
{键：'subjects'，标题：'subjects'，图标：'book open'，颜色：'#009688'}，
{键：'锦标赛'，标题：'锦标赛'，图标：'奖杯'，颜色：'#795548'}，
{键：“视频”，标题：“视频提要”，图标：“视频”，颜色：'#607D8B'}
]);
const renderScene=BottomNavigation.SceneMap({
主页：主屏幕，
主题：主题屏幕，
锦标赛：锦标赛屏幕，
视频：视频屏幕
});
返回(
);
};
导出默认导航控制器；

在subjectNavigator堆栈中尝试从一个屏幕移动到另一个屏幕时，执行此操作会出现类似--找不到变量：navigation的错误

---

请帮忙

您可以创建一个用于每个路由的堆栈导航器组件。然后，传入一个

initialRouteName

prop

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