将React-Native-Paper BottomNavigation与StackNavigator相结合

import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// 定义页面组件
const HomeScreen = () => <Text>Home Screen</Text>;
const ProfileScreen = () => <Text>Profile Screen</Text>;

// 创建StackNavigator
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

// 创建底部导航栏
const BottomNav = createAppContainer(AppNavigator);

// 应用入口组件
export default function App() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'home', title: 'Home', icon: 'home' },
    { key: 'profile', title: 'Profile', icon: 'account' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    home: HomeScreen,
    profile: ProfileScreen,
  });

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
}