Передача значений из одной функции в другую с помощью навигации React 5 - PullRequest
Новая
       12

Передача значений из одной функции в другую с помощью навигации React 5

0 голосов
/ 05 марта 2020

Я хотел бы передать значение "Hello" из приложения. js на screen1. js. Закуска: https://snack.expo.io/@mobshed / передача данных между функциями

Спасибо за помощь!

Приложение. 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>
  );
}

Ответы [ 2 ]

1 голос
/ 05 марта 2020

ОК, нашел это! Спасибо, Хан, за то, что поставил меня на правильный путь раньше, чем ты удалил свой ответ 

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>
  );
}
1 голос
/ 05 марта 2020

на экране 1. 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" });
        }}
      />
...