reactnative创建底部导航

react-native 创建底部导航

使用createBottomTabNavigator

• 安装依赖

根据官方文档的提示,需要确保有:"@react-navigation/native"及其依赖项和@react-navigation/material-bottom-tabs"

以下是我的：

"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/material-bottom-tabs": "^5.3.15",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"react": "17.0.1",
"react-native": "0.64.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-paper": "^4.8.1",
"react-native-reanimated": "^2.1.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.2.0",
"react-native-vector-icons": "^8.1.0"
}


• 就可以开始写了

import React, { Component } from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import HomePage from '../pages/Home'
import movie from '../pages/movie'
import hotel from '../pages/hotel'
import bank from '../pages/bank'
// 编写底部的导航
function ButtonTab() {
const Tab = createBottomTabNavigator();
return (
// 底部的导航
// 配置
screenOptiOns={({ route }) => ({
//图标
tabBarIcon: ({ focused, color, size }) => {
let icon;
// 判断是哪个被选中了
if (route.name === '美食') {
icon = focused ?
()
: ()
} else if (route.name === '电影') {
icon = focused ?
()
: ()
} else if (route.name === '酒店') {
icon = focused ?
()
: ()
} else if (route.name === '银行') {
icon = focused ?
()
: ()
}
// return一个图标
return icon;
// 导入react-native-vector-icons 命名的那个名字
}
})}
// 配置选中和不选中的颜色
tabBarOptiOns={{
// 选中时的文字颜色
activeTintColor: "#ec7259",
// 未选中时的文字颜色
inactiveTintColor: "#999",
// activeBackgroundColor:"#ec7259"
}}>





)
}
// 创建堆栈
let Stack = createStackNavigator();
class App extends Component {
render(h) {
return (


{/* 里面有场景,也就是页面,第一个的component一定要是上面编写的底部导航*/}






)
}
}
const styles = StyleSheet.create({
on: {
width: 25,
height: 25,
tintColor:'#ec7259'
},
off:{
width: 25,
height: 25,
tintColor:'#333333'
}
})
export default App


相应的注释也写在代码中了

• 注意：这里是自己的新建对应的单个页面文件，然后再导入

import HomePage from '../pages/Home'
import movie from '../pages/movie'
import hotel from '../pages/hotel'
import bank from '../pages/bank'


• 下面是运行的效果
• 

希望能够帮到你