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>
相关推荐
木西4 天前
从0到1搭建一个RN应用从开发测试到上架全流程
android·前端·react native
哇哦谢谢你5 天前
React Native环境配置
前端·react native
getapi5 天前
Flutter和React Native在开发app中,哪个对java开发工程师更适合
java·flutter·react native
武当王丶也9 天前
React Native 状态管理:用 Jotai 替代 useState
前端·react native
武当王丶也9 天前
React Native 本地缓存:react-native-mmkv
前端·react native
武当王丶也9 天前
React Native 设备屏幕尺寸适配:react-native-size-matters
前端·react native
MshengYang_lazy10 天前
React Native离线级联选择器开发手记:当SQLite遇见小区房号选择
前端·react native·sqlite
No Silver Bullet12 天前
React Native进阶(六十一): WebView 替代方案 react-native-webview 应用详解
javascript·react native·react.js
武当王丶也12 天前
React Native 路由导航:React Navigation
react native
ThinkPet13 天前
【003安卓开发方案调研】之ReactNative技术开发安卓
android·react native·react.js