react-native 创建底部导航

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'

• 下面是运行的效果
• 

希望能够帮到你