使用 React 导航将值从一个函数传递到另一个函数 5

Question

我想将值 "Hello" 从 App.js 传递给 screen1.js。小吃：https://snack.expo.io/@mobshed/passing-data-between-functions

感谢您的帮助！

App.js

import React, { useState, useEffect, Component } from "react";
import MyScreen from './screen1'

export default function Root() {
    return <MyScreen show="Hello" />;
}

screen1.js

import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator
} from "@react-navigation/stack";
const Stack = createStackNavigator();

function screenPage ({show}) {
  alert(show)
  return (<View style={{ justifyContent: "center", flex: 1}}><Text>Hello world</Text></View>)
}

export default function Root({ navigation }) {
  return (
    <NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: "center",
        gestureEnabled: false,
        gestureDirection: "horizontal"
      }}
    >
      <Stack.Screen
        options={{
          headerShown: false
        }}
        name="screenPage"
        component={screenPage}
      />   
    </Stack.Navigator>
     </NavigationContainer>
  );
}

Answer 1

在screen1.js中：

import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator
} from "@react-navigation/stack";
const Stack = createStackNavigator();

function screenPage ({route}) {
  const {show} = route.params;
  alert(show);
  return (<View style={{ justifyContent: "center", flex: 1}}><Text>Hello world</Text></View>)
}

export default function Root({ navigation, show }) {
  return (
    <NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: "center",
        gestureEnabled: false,
        gestureDirection: "horizontal"
      }}
    >
      <Stack.Screen
        options={{
          headerShown: false
        }}
        name="screenPage"
        component={screenPage}
        initialParams={{show: show}}
      />   
    </Stack.Navigator>
     </NavigationContainer>
  );
}

另一种方式，你可以像这样传递参数：

<Button
        title="Done"
        onPress={() => {
          // Pass params back to screenPage
          navigation.navigate('screenPage', { show: "hello" });
        }}
      />

Answer 2

好的，找到了！感谢 Khanh 在你删除你的答案之前让我走上了正确的道路

import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator
} from "@react-navigation/stack";
const Stack = createStackNavigator();

function screenPage ({route}) {
  alert(route.params.user)
  return (<View style={{ justifyContent: "center", flex: 1}}><Text>Hello world</Text></View>)
}

export default function Root({ navigation, show}) {
  return (
    <NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: "center",
        gestureEnabled: false,
        gestureDirection: "horizontal"
      }}
    >
      <Stack.Screen
        options={{
          headerShown: false
        }}
        name="screenPage"
        component={screenPage}
        initialParams={{ user: show }}
      />   
    </Stack.Navigator>
     </NavigationContainer>
  );
}

使用 React 导航将值从一个函数传递到另一个函数 5

Passing values from one function to another with React navigation 5

react-native

react-navigation-v5