好的,让我们开始学习如何在React Native中使用导航。
安装React Navigation
首先,你需要安装React Navigation库。在项目文件夹中打开终端窗口,并运行以下命令:
npm install @react-navigation/native
或者
yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context
这将安装React Navigation库及其依赖项。
接着,你需要安装React Navigation的堆栈导航器。在终端窗口中运行以下命令:
npm install @react-navigation/stack
//或者yarn add @react-navigation/stack
创建屏幕组件
在项目中创建一个新的文件夹,例如“screens”,用于存放你的屏幕组件。接着,在该文件夹中创建两个新的文件,例如“HomeScreen.js”和“DetailsScreen.js”,用于编写你的两个屏幕组件。
在“HomeScreen.js”文件中,编写以下代码:
import React from 'react';
import { Button, Text, View } from 'react-native';
const HomeScreen = ({ navigation }) => {
return (
Home Screen
title="Go to Details" onPress={() => navigation.navigate('Details')} /> );}export default HomeScreen;在该文件中,我们创建了一个名为HomeScreen的函数式组件。该组件接受一个名为“navigation”的属性,用于处理导航逻辑。在该组件中,我们使用View组件来创建一个包含文本和按钮的屏幕。当用户点击按钮时,我们使用navigation.navigate()方法将用户导航到Details屏幕。 在“DetailsScreen.js”文件中,编写以下代码: import React from 'react';import { Button, Text, View } from 'react-native';const DetailsScreen = ({ navigation }) => { return ( Details Screen title="Go to Home" onPress={() => navigation.navigate('Home')} /> );}export default DetailsScreen;在该文件中,我们创建了一个名为DetailsScreen的函数式组件。该组件接受一个名为“navigation”的属性,用于处理导航逻辑。在该组件中,我们使用View组件来创建一个包含文本和按钮的屏幕。当用户点击按钮时,我们使用navigation.navigate()方法将用户导航回Home屏幕。 创建导航器 在项目中创建一个新的文件,例如“Navigator.js”,用于编写你的导航器。在该文件中,编写以下代码: import React from 'react';import { createStackNavigator } from '@react-navigation/stack';import HomeScreen from './screens/HomeScreen';import DetailsScreen from './screens/DetailsScreen';const Stack = createStackNavigator();const Navigator = () => { return ( );}export default Navigator;在该文件中,我们使用createStackNavigator()方法创建一个名为Stack的堆栈导航器。在该导航器中,我们定义了两个屏幕:Home和Details。我们将这些屏幕与之前创建的组件文件(HomeScreen.js和DetailsScreen.js)相关联。 在应用程序中使用导航器 在应用程序的主文件中,例如“App.js”,引入你的导航器: import React from 'react';import Navigator from './Navigator';const App = () => { return ( );}export default App;这个文件中,我们引入了刚才创建的导航器,并将其作为组件放置在应用程序中。 运行应用程序 最后,运行应用程序,查看你的导航器是否正常工作: react-native run-android或者 react-native run-ios你应该能够在模拟器或真机上看到一个具有两个屏幕的应用程序,用户可以在这两个屏幕之间进行导航。 这就是使用函数式组件在React Native中使用导航的基本步骤。你可以继续学习更高级的React Navigation功能,例如自定义标题、传递参数等等。 注意事项 当我们添加这些库之后,比如react-native-safe-area-context 可能就编译卡住或者失败提示kotlin 等错误, 那经过观察build.gradle ,会取到kotlinVersion ,我们可以指定 kotlinVersion = "1.6.20" 版本, 国内下载库的时候,非常慢,我们可以设置阿里云镜像仓库。 ...buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" kotlinVersion = "1.6.20" } repositories { maven { url 'https://maven.aliyun.com/repository/public/' } maven { url 'https://maven.aliyun.com/repository/central' } maven { url 'https://maven.aliyun.com/repository/google/' } maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' } google() mavenCentral() } ...buildscript { def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['RNSAC_kotlinVersion'] repositories { mavenCentral() } dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version") }}def getExtOrDefault(name, defaultValue) { return rootProject.ext.has(name) ? rootProject.ext.get(name) : defaultValue}查看原文
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
);
}
export default HomeScreen;
在该文件中,我们创建了一个名为HomeScreen的函数式组件。该组件接受一个名为“navigation”的属性,用于处理导航逻辑。在该组件中,我们使用View组件来创建一个包含文本和按钮的屏幕。当用户点击按钮时,我们使用navigation.navigate()方法将用户导航到Details屏幕。
在“DetailsScreen.js”文件中,编写以下代码:
const DetailsScreen = ({ navigation }) => {
Details Screen
title="Go to Home" onPress={() => navigation.navigate('Home')} /> );}export default DetailsScreen;在该文件中,我们创建了一个名为DetailsScreen的函数式组件。该组件接受一个名为“navigation”的属性,用于处理导航逻辑。在该组件中,我们使用View组件来创建一个包含文本和按钮的屏幕。当用户点击按钮时,我们使用navigation.navigate()方法将用户导航回Home屏幕。 创建导航器 在项目中创建一个新的文件,例如“Navigator.js”,用于编写你的导航器。在该文件中,编写以下代码: import React from 'react';import { createStackNavigator } from '@react-navigation/stack';import HomeScreen from './screens/HomeScreen';import DetailsScreen from './screens/DetailsScreen';const Stack = createStackNavigator();const Navigator = () => { return ( );}export default Navigator;在该文件中,我们使用createStackNavigator()方法创建一个名为Stack的堆栈导航器。在该导航器中,我们定义了两个屏幕:Home和Details。我们将这些屏幕与之前创建的组件文件(HomeScreen.js和DetailsScreen.js)相关联。 在应用程序中使用导航器 在应用程序的主文件中,例如“App.js”,引入你的导航器: import React from 'react';import Navigator from './Navigator';const App = () => { return ( );}export default App;这个文件中,我们引入了刚才创建的导航器,并将其作为组件放置在应用程序中。 运行应用程序 最后,运行应用程序,查看你的导航器是否正常工作: react-native run-android或者 react-native run-ios你应该能够在模拟器或真机上看到一个具有两个屏幕的应用程序,用户可以在这两个屏幕之间进行导航。 这就是使用函数式组件在React Native中使用导航的基本步骤。你可以继续学习更高级的React Navigation功能,例如自定义标题、传递参数等等。 注意事项 当我们添加这些库之后,比如react-native-safe-area-context 可能就编译卡住或者失败提示kotlin 等错误, 那经过观察build.gradle ,会取到kotlinVersion ,我们可以指定 kotlinVersion = "1.6.20" 版本, 国内下载库的时候,非常慢,我们可以设置阿里云镜像仓库。 ...buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" kotlinVersion = "1.6.20" } repositories { maven { url 'https://maven.aliyun.com/repository/public/' } maven { url 'https://maven.aliyun.com/repository/central' } maven { url 'https://maven.aliyun.com/repository/google/' } maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' } google() mavenCentral() } ...buildscript { def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['RNSAC_kotlinVersion'] repositories { mavenCentral() } dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version") }}def getExtOrDefault(name, defaultValue) { return rootProject.ext.has(name) ? rootProject.ext.get(name) : defaultValue}查看原文
title="Go to Home"
onPress={() => navigation.navigate('Home')}
export default DetailsScreen;
在该文件中,我们创建了一个名为DetailsScreen的函数式组件。该组件接受一个名为“navigation”的属性,用于处理导航逻辑。在该组件中,我们使用View组件来创建一个包含文本和按钮的屏幕。当用户点击按钮时,我们使用navigation.navigate()方法将用户导航回Home屏幕。
创建导航器
在项目中创建一个新的文件,例如“Navigator.js”,用于编写你的导航器。在该文件中,编写以下代码:
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createStackNavigator();
const Navigator = () => {
export default Navigator;
在该文件中,我们使用createStackNavigator()方法创建一个名为Stack的堆栈导航器。在该导航器中,我们定义了两个屏幕:Home和Details。我们将这些屏幕与之前创建的组件文件(HomeScreen.js和DetailsScreen.js)相关联。
在应用程序中使用导航器
在应用程序的主文件中,例如“App.js”,引入你的导航器:
import Navigator from './Navigator';
const App = () => {
export default App;
这个文件中,我们引入了刚才创建的导航器,并将其作为组件放置在应用程序中。
运行应用程序
最后,运行应用程序,查看你的导航器是否正常工作:
react-native run-android
react-native run-ios
你应该能够在模拟器或真机上看到一个具有两个屏幕的应用程序,用户可以在这两个屏幕之间进行导航。
这就是使用函数式组件在React Native中使用导航的基本步骤。你可以继续学习更高级的React Navigation功能,例如自定义标题、传递参数等等。
注意事项
当我们添加这些库之后,比如react-native-safe-area-context 可能就编译卡住或者失败提示kotlin 等错误, 那经过观察build.gradle ,会取到kotlinVersion ,我们可以指定 kotlinVersion = "1.6.20" 版本, 国内下载库的时候,非常慢,我们可以设置阿里云镜像仓库。
...
buildscript {
ext {
buildToolsVersion = "33.0.0"
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
ndkVersion = "23.1.7779620"
kotlinVersion = "1.6.20"
repositories {
maven {
url 'https://maven.aliyun.com/repository/public/'
url 'https://maven.aliyun.com/repository/central'
url 'https://maven.aliyun.com/repository/google/'
url 'https://maven.aliyun.com/repository/gradle-plugin/'
google()
mavenCentral()
def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['RNSAC_kotlinVersion']
dependencies {
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
def getExtOrDefault(name, defaultValue) {
return rootProject.ext.has(name) ? rootProject.ext.get(name) : defaultValue
查看原文
本文由 用户 于 2024-03-31 发布在 夸智网,如有疑问,请联系我们。本文链接:https://www.kuazhi.com/post/532442.html
散列表 数据结构 【Java集合】HashMap的扩容操作源码详解
课程设计 嵌入式硬件 【单片机毕业设计】【mcuclub-dz-184】基于STM32的智能快递柜的设计与实现
开发语言 Kotlin 开发Android app(十):Android控件绑定ViewBinding
数据库 ubuntu篇---ubuntu安装mysql教程
前端 1小时学会HTML5基础
单片机 嵌入式硬件 Arduino 物联网 【ESP32最全学习笔记(基础篇)——1.ESP32简介】
嵌入式硬件 单片机 江协科技STM32——旋转编码器计次(软件消抖)
网络安全 http tcp/ip 内网穿透——使用Windows自带的网站程序建立网站
发表评论