reactnavigation

最新推荐文章于 2025-06-10 12:01:49 发布

原创最新推荐文章于 2025-06-10 12:01:49 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native #android #react.js

react-navigation 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在React Native项目中使用react-navigation库进行页面跳转和底部导航配置，包括createNativeStackNavigator和createBottomTabNavigator的用法。同时解决react-native-vector-icons图标不显示的问题，通过在项目配置和代码中引入图标组件实现自定义导航栏图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

reactnavigation 跳转和底部导航的使用

在这里插入图片描述

项目的json文件

{
  "name": "333",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "build": "cd android && gradlew assembleRelease",
    "debug": "cd android && gradlew assembleDebug"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "react": "17.0.2",
    "react-native": "0.65.0",
    "react-native-safe-area-context": "^4.2.5",
    "react-native-screens": "^3.13.1",
    "react-native-vector-icons": "^9.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/runtime": "^7.18.3",
    "@react-native-community/eslint-config": "^3.0.2",
    "babel-jest": "^28.1.0",
    "eslint": "^8.16.0",
    "jest": "^28.1.0",
    "metro-react-native-babel-preset": "^0.71.0",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

react-native-vector-icons icon 不显示问题

react-native link react-native-vector-icons
或者
android/app/build.gradle文件，添加如下内容：（不添加这块内容会导致图标不能显示，显示X）

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

两个分别试下，

直接上app.js 代码

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import login from './laundry/page/login'
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text >Home Screen</Text>
    </View>
  );
}

function HomeScreen2() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>HomeScreen2</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function HomeTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

      if (route.name === 'Home') {
        iconName = focused
          ? 'home-outline'
          : 'home-outline';
      } else if (route.name === 'Settings') {
        iconName = focused ? 'planet-outline' : 'planet-outline';
      }
{/* <ion-icon name="planet-outline"></ion-icon> */}
          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'yellow',
        tabBarInactiveTintColor: 'red',
      })}
    >
      <Tab.Screen name="Home" component={login}  options={{ tabBarBadge: 3 }} />
      <Tab.Screen name="Settings" component={HomeScreen2} />
    </Tab.Navigator>
  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"  
      // screenOptions={{headerShown:false}}  控制是否显示头部导航栏
      >
        <Stack.Screen name="Home3"  component={HomeTabs} options={{ title: 'Home',headerMode:'none' ,headerShown:false }}  />
        <Stack.Screen name="Home2" component={HomeScreen} options={{ headerShown:false }}  />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

headerShown:false：控制是否显示头部导航栏

官方文档的地址 https://reactnavigation.org/