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

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

效果图

安装

npm install @react-navigation/native

npm install @react-navigation/bottom-tabs
1
2
3

封装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 }) => (
                      <Image
                          source={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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

引入

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

        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{headerShown:false}}
                options={{ title: 'My home' }} initialRouteName="Tarbar" >
                {/*登录*/}
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="Tarbar" component={Tarbar} />
            </Stack.Navigator>
        </NavigationContainer>
1
2
3
4
5
6
7
8
9