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>
相关推荐
老码沉思录1 天前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
老码沉思录2 天前
React Native 全栈开发实战班 - 性能与调试之内存管理
javascript·react native·react.js
前端郭德纲2 天前
ReactNative的环境搭建
javascript·react native·react.js
前端郭德纲2 天前
React Native的开发流程是怎样的?
javascript·react native·react.js
老码沉思录2 天前
React Native 全栈开发实战班 - 原生功能集成之权限管理
javascript·react native·react.js
小纯洁w2 天前
React Native的`react-native-reanimated`库中的`useAnimatedStyle`钩子来创建一个动画样式
javascript·react native·react.js
前端郭德纲2 天前
React Native的界面与交互
react native·react.js·交互
MavenTalk3 天前
React可以做全栈开发吗
前端·react native·react.js·前端框架·全栈开发
努力学前端Hang3 天前
react native 安装好apk后无法打开
javascript·react native·react.js
老码沉思录4 天前
React Native 全栈开发实战班 - 打包发布之热更新
javascript·react native·react.js