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 (
// 底部的导航
<Tab.Navigator
// 配置
screenOptions={({ route }) => ({
//图标
tabBarIcon: ({ focused, color, size }) => {
let icon;
// 判断是哪个被选中了
if (route.name === '美食') {
icon = focused ?
(<Image style={styles.on} source={require('../images/icon_food.png')} />)
: (<Image style={styles.off} source={require('../images/icon_food.png')} />)
} else if (route.name === '电影') {
icon = focused ?
(<Image style={styles.on} source={require('../images/icon_movie.png')} />)
: (<Image style={styles.off} source={require('../images/icon_movie.png')} />)
} else if (route.name === '酒店') {
icon = focused ?
(<Image style={styles.on} source={require('../images/icon_hotel.png')} />)
: (<Image style={styles.off} source={require('../images/icon_hotel.png')} />)
} else if (route.name === '银行') {
icon = focused ?
(<Image style={styles.on} source={require('../images/icon_bank.png')} />)
: (<Image style={styles.off} source={require('../images/icon_bank.png')} />)
}
// return一个图标
return icon;
// 导入react-native-vector-icons 命名的那个名字
}
})}
// 配置选中和不选中的颜色
tabBarOptions={{
// 选中时的文字颜色
activeTintColor: "#ec7259",
// 未选中时的文字颜色
inactiveTintColor: "#999",
// activeBackgroundColor:"#ec7259"
}}>
<Tab.Screen name="美食" component={HomePage} />
<Tab.Screen name="电影" component={movie} />
<Tab.Screen name="酒店" component={hotel} />
<Tab.Screen name="银行" component={bank} />
</Tab.Navigator >
)
}
// 创建堆栈
let Stack = createStackNavigator();
class App extends Component {
render(h) {
return (
<NavigationContainer>
<Stack.Navigator>
{/* 里面有场景,也就是页面,第一个的component一定要是上面编写的底部导航*/}
<Stack.Screen name="ButtonTab" component={ButtonTab} options={{headerShown:false} }/>
<Stack.Screen name="movie" component={movie} options={{ headerTitle: '详情', headerBackTitle: "返回" ,headerShown:false}} />
<Stack.Screen name="hotel" component={hotel} options={{ headerTitle: '酒店', headerBackTitle: "返回",headerShown:false }} />
<Stack.Screen name="bank" component={bank} options={{ headerTitle: '银行', headerBackTitle: "返回" ,headerShown:false}} />
</Stack.Navigator>
</NavigationContainer>
)
}
}
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'
- 下面是运行的效果
希望能够帮到你