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>
相关推荐
少恭写代码20 小时前
duxapp放弃了redux,在duxapp中局部、全局状态的实现方案
react native·taro·redux·duxapp
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
EBABEFAC3 天前
响应式编程-reactor
java·开发语言·react native
Engss7 天前
Taro React-Native Android apk 打包
android·react native·taro
镰刀出海8 天前
RN开发环境配置与Android版本app运行
android·react native
wills7779 天前
Flutter 状态管理框架Get
flutter·react native
MavenTalk10 天前
前端跨平台开发常见的解决方案
前端·flutter·react native·reactjs·weex·大前端
起司锅仔10 天前
ReactNative TurboModule(3)
android·javascript·react native·react.js
起司锅仔11 天前
ReactNative 简述(1)
android·javascript·react native·react.js
起司锅仔11 天前
ReactNative JSI(4)
android·javascript·react native