reactnative 底部tab页面@react-navigation/bottom-tabs

使用react-navigation/native做的页面导航和tab‘
官网：https://reactnavigation.org/docs/getting-started

效果图

在这里插入图片描述

安装

npm install @react-navigation/nativenpm install @react-navigation/bottom-tabs

封装tabbar.js

import { View, StyleSheet, Image } from "react-native";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
const Tab = createBottomTabNavigator();import Home from "../views/home"
import Record from "../views/record";
import Sys from "../views/sys";
import {useState} from "react";
const dataSource = [{icon: require("../assets/images/tabbar/home-un.png"),  // 未选中图标selectedIcon: require("../assets/images/tabbar/home.png"), // 选择图标tabPage: 'Home',											// 名称tabName: '首页',											// 文字badge: 0,component:Home												// 页面},{icon: require("../assets/images/tabbar/record-un.png"),selectedIcon: require("../assets/images/tabbar/record.png"),tabPage: 'Record',tabName: '记录',badge: 0,component: Record},{icon: require("../assets/images/tabbar/sys-un.png"),selectedIcon: require("../assets/images/tabbar/sys.png"),tabPage: 'Sys',tabName: '系统',badge: 0,component: Sys}];let Index=()=>{const [selectedTab,setSelect]=useState('Home');return (<View style={{ flex: 1, backgroundColor: '#F5FCFF' }}><Tab.Navigator >{dataSource.map((v, i) => {return (<Tab.Screen name={v.tabPage} component={v.component} key={i}  options={{ tabBarLabel: v.tabName,headerShown: false,tabBarIcon: ({ focused }) => (<Imagesource={focused ? v.selectedIcon : v.icon}style={{ width: 30, height: 30 }}/>),tabBarActiveTintColor: '#59E0A7',tabBarInactiveTintColor: '#5E5E5E'}}/>)})}</Tab.Navigator></View>)
}const stylesheet = StyleSheet.create({tab: {justifyContent: "center"},tabIcon: {color: "#999",width: 23,height: 23}
})
export default Index;

引入

在route,js中引入tabbar.js.设置默认展示Tarbar

        <NavigationContainer><Stack.NavigatorscreenOptions={{headerShown:false}}options={{ title: 'My home' }} initialRouteName="Tarbar" >{/*登录*/}<Stack.Screen name="Login" component={Login} /><Stack.Screen name="Tarbar" component={Tarbar} /></Stack.Navigator></NavigationContainer>