如何修复未显示在底部导航栏中的错误？

Question

我正在研究一个带有“ react native”的简单应用程序，但是我无法在example中找到导航栏。 我只能看到白屏。

interface State {
    selectedIndex: number;
}

interface Props {
    navigation: any;
}
export class BottomNavigationShowcase extends React.Component<Props, State> {
    state: State = {
        selectedIndex: 1,
    };
    onTabSelect = (selectedIndex: number): void => {
        this.setState({ selectedIndex });
        const {
          [selectedIndex]: selectedRoute,
        } = this.props.navigation.state.routes;
        this.props.navigation.navigate(selectedRoute.routeName);
      };
      render(): React.ReactNode {
        return (
          <BottomNavigation
            style={styles.bottomNavigation}
            indicatorStyle={styles.indicator}
            selectedIndex={this.state.selectedIndex}
            onSelect={this.onTabSelect}
          >
            <BottomNavigationTab
              style={styles.tab}
              titleStyle={styles.tabTitle}
              title="Dashboard"
            />
             ...
          </BottomNavigation>
        );
      }
    }

const TabNavigator = createBottomTabNavigator(
    {
        Dashboard: Dashboard,
        Letter: Letter,
        Mypage: MyPage,
    },
    {
        initialRouteName: 'Dashboard',
        tabBarComponent: BottomNavigationShowcase,
    }
);
const Total = createSwitchNavigator(
    {
        Dashboard,
        App: TabNavigator,
    },
    {
        initialRouteName: 'Dashboard'
    }
)


export default createAppContainer(Total);

我希望将底部导航栏添加到仪表板屏幕的顶部，但是仅输出白色屏幕。每个屏幕上都有垃圾文本。

如果您能向我提供描述导航和屏幕之间关系的文档或说明，我将不胜感激。