如何在 React Native 中的屏幕之间传递值？

React Native 用于创建跨平台应用程序。 React Native 的最大缺点之一是它没有任何内置的导航系统。我们必须使用其他库来实现 React Native 中的导航。 React Navigation 库与 React Native 一起广泛用于实现各种类型的导航系统。

使用 React Navigation，我们还可以在 React Native 中的屏幕之间传递值或参数。我们将创建一个带有 2 个屏幕的简单堆栈导航器，并将值从一个屏幕传递到另一个屏幕。

创建应用程序：

第 1 步：打开终端并运行以下命令。它将在您的系统中全局安装 Expo CLI。

npm install -g expo-cli

第 2 步：现在，通过运行以下命令创建一个新的 React Native 项目。

expo init "Your_Project_Name"

第 3 步：您将被要求选择一个模板。选择空白模板。

空白模板

第 4 步：现在转到项目文件夹

cd "Your_Project_Name"

第 5 步：现在，要实现任何类型的导航，我们首先需要在我们的 React Native 项目中安装 React Navigation 包。运行以下命令。

npm install @react-navigation/native // OR
yarn add @react-navigation/native

第 6 步：将所需的依赖项安装到 Expo 管理的项目中。

expo install react-native-screens react-native-safe-area-context

第 7 步：到目前为止，我们安装的库是导航器所需的包。但是 React Navigation 中的每个导航器都有自己的库，我们需要添加它们。

npm install @react-navigation/native-stack // OR
yarn add @react-navigation/native-stack

第 8 步：现在运行以下命令以启动服务器。

npm start

项目结构：它将如下所示。

项目结构

在以下示例中，我们将创建 2 个屏幕，分别称为 HomeScreen 和 MessageScreen。我们还将创建一个堆栈导航器并将值从 HomeScreen 传递到 MessageScreen。因此，创建 2 个名为 HomeScreen.js 和 MessageScreen.js 的文件。

主屏幕和消息屏幕

示例：按照以下步骤在 React Native 中的屏幕之间传递值。

第 1 步：打开HomeScreen.js文件并在该文件中写入以下代码。

在这个文件中，我们将创建一个 TextInput 和一个 Button 组件。用户可以在此 TextInput 中添加消息并按下按钮。用户将被重定向到 MessageScreen。我们会将用户从 HomeScreen 输入的任何值传递给 MessageScreen，并且该消息将显示在 MessageScreen 上。

HomeScreen.js

import { Button, StyleSheet, Text, TextInput, 
    View } from 'react-native';
import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
  
const HomeScreen = () => {
  const [message, setMessage] = useState('');
  const navigation = useNavigation();
  const goToMessageScreen = () => {
    navigation.navigate('Message', {
      message,
    });
  };
  
  return (
    
      GeeksforGeeks
       setMessage(text)}
        style={styles.input}
      />
      
    
  );
};
  
export default HomeScreen;
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
    color: 'green',
    marginTop: 50,
  },
  input: {
    width: '75%',
    padding: 10,
    marginTop: 20,
    color: '#000',
  },
});

第 2 步：打开MessageScreen.js文件并在该文件中写入以下代码。

在这个文件中，我们将通过路由从 HomeScreen 接收值。稍后，我们将在屏幕上的 Text 组件中显示该值。

MessageScreen.js

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';
import { useRoute } from '@react-navigation/native';
  
const MessageScreen = () => {
  const route = useRoute();
  
  return (
    
      {route.params.message}
    
  );
};
  
export default MessageScreen;
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
    color: 'green',
    marginTop: 50,
  },
});

第 3 步：打开App.js文件并在该文件中写入以下代码。

App.js是运行应用程序时首先呈现的主文件。在这个文件中，我们将创建一个堆栈导航器。 NavigationContainer 将包含 HomeScreen 和 MessageScreen 以便我们可以在它们之间导航。

应用程序.js

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import MessageScreen from './MessageScreen';
  
const Stack = createNativeStackNavigator();
  
export default function App() {
  return (
    
      
        
        
      
    
  );
}

输出：

在屏幕之间传递值