如何在 React Native 中的两个屏幕之间传递动态数据？

Question

我参考了 react native(https://reactnavigation.org/docs/params) 的官方文档。我观察到它们在屏幕之间传递静态数据。但我想传递从用户那里获取的数据。 如果有人知道如何共享数据，请提供帮助。我也利用了上下文 api 的帮助，但我未能传递数据。 任何来源或 material 也会有所帮助。

Answer 1

检查此代码段。

  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}

Answer 2

您的问题可能与您的输入有关。您似乎没有将输入捕获到状态变量中。

从 ReactNative 输入检查这个例子： https://reactnative.dev/docs/0.65/textinput

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const Screen1 = () => {
  const [text, onChangeText] = React.useState("Hello world");

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default Screen1;

然后你可以使用导航：

navigation.navigate('Details', {
  param1: text,
});

在另一个屏幕中，您可以这样读取 param1：

route.params.param1

别忘了

不要忘记在函数中将路由作为参数传递( {route) }{ ... }

Answer 3

将参数传递给屏幕

navigation.navigate('screenName', {
   paramName: 'valueYouwantToPass',
});

因为你提到了上下文 API，试试

异步存储

import {AsyncStorage} from 'react-native';

或

设备事件发射器

import { DeviceEventEmitter} from 'react-native';

如何在 React Native 中的两个屏幕之间传递动态数据？

How to pass dynamic data between two screen in React native?

javascript

reactjs

react-native

react-navigation

react-context