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

使用react-navigation/native做的页面导航和tab'

官网:https://reactnavigation.org/docs/getting-started

效果图

安装

javascript 复制代码
npm install @react-navigation/native

npm install @react-navigation/bottom-tabs

封装tabbar.js

javascript 复制代码
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;

引入

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

javascript 复制代码
        <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>
相关推荐
数据智能老司机15 小时前
React关键概念——理解React组件与JSX
react native·react.js·前端框架
JQShan17 小时前
React Native小课堂:箭头函数 vs 普通函数,为什么你的this总迷路?
javascript·react native·ios
cauyyl3 天前
xcode 16 遇到contains bitcode
react native·xcode
冰冷的bin4 天前
【React Native】自适应宽高的图片组件AdaptiveImage
react native
墨渊君7 天前
React Native 入门指南: 构建 UI 的必备核心组件
前端·react native·react.js
这个昵称也不能用吗?9 天前
react-native搭建开发环境过程记录
前端·react native·cocoapods
厨猿加加10 天前
FlatList 在 React Native 的最佳实践
前端·react native
jinzunqinjiu10 天前
学习react-native组件 1 Image加载图片的组件。
前端·react native
乐影10 天前
React Native踩坑记录之——屏幕适配
前端·react native
就是我12 天前
如何用lazy+ Suspense实现组件延迟加载
javascript·react native·react.js