使用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>