React Navigation Tab navigation

Tab navigation安装

手机应用中最常见的导航风格可能是基于标签的导航。这可以是屏幕底部的标签，也可以是页眉下方的标签(甚至可以是页眉)。
此处我们可以集成github上比较受欢迎的一个强大的icons库：yarn add react-native-vector-icons

yarn add @react-navigation/bottom-tabs

Drawer navigation安装

Drawer navigation一般显示在窗口左侧

yarn add @react-navigation/drawer
yarn add react-native-gesture-handler react-native-reanimated
// 还需要在入口文件的顶部添加如下配置：
import 'react-native-gesture-handler';

使用

// 创建导航器
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

//使用导航器创建导航
function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="通讯录" component={MyTxl} />
      <Tab.Screen name="发票助手" component={MyReceipt} />
      <Tab.Screen name="产品中心" component={MyProduct} />
    </Tab.Navigator>
  );
}

function Home2() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="通讯录" component={MyTxl} />
      <Drawer.Screen name="发票助手" component={MyReceipt} />
      <Drawer.Screen name="产品中心" component={MyProduct} />
    </Drawer.Navigator>
  );
}