Reactjs 如何使用文本输入从下一个屏幕获取数据到上一个仅使用react native中文本字段的屏幕

这是我的代码。这只是一个简单的测试屏幕。导航在两个屏幕上完成。我是初学者，所以我不熟悉redux。我希望当用户在第二个屏幕上输入文本时，当用户从第二个屏幕切换回第一个屏幕时，相同的文本将作为用户名出现在第一个屏幕上。请帮帮我。谢谢。

    import React, { Component } from 'react';
    import { View, Text } from 'react-native';

    class FirstScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
        };
      }

      render() {
        return (
          <View>
            <Text> UserNAme </Text>
          </View>
        );
      }
    }

    export default FirstScreen;



    import React, { Component } from 'react';
    import {View, TextInput} from 'react-native';

    class SecondScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
        };
      }

      render() {
        return (
          <View>
            <TextInput/>
          </View>
        );
      }
    }

    export default SecondScreen;

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
类FirstScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
用户名
);
}
}
导出默认第一屏；
从“React”导入React，{Component}；
从“react native”导入{View，TextInput}；
类SecondScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
);
}
}
导出默认第二屏幕；

您可以使用服务文件PubSub（），也可以在第二个屏幕的本地存储中存储值，并在第一个屏幕中检索

在本地存储中存储值，如下所示：

try {
       await AsyncStorage.setItem(
           key,
           value
       )

   } catch (error) {
   }

检索值：

try {
        return await AsyncStorage.getItem(key)
    } catch (error) {
    }

---

由于您没有使用任何全局存储/状态，因此要将值传递到上一个屏幕，您可以在导航到上一个屏幕并在那里使用时将其作为参数传递

但是如果您需要在多个屏幕上使用一个值，那么应该使用全局状态/存储。（您可以使用mobx，因为它易于学习，可用于小型应用程序）

---

希望这有帮助…

有两种方法可以解决此问题：

使用

Redux

。Redux使您能够保存数据并在任何屏幕中访问数据

您可以将回调函数传递到下一个屏幕，并在

pop

函数之前的第二个屏幕中调用它

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
类FirstScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
};
}
render（）{
返回(
{this.state.username}
);
}
回调（用户名）{
this.setState（{username}）；
}
goToSecondScreen（）{
//取决于您的导航库
navigation.push（'SecondScreen'{
callback:this.callback，
});
}
}
导出默认第一屏；
从“React”导入React，{Component}；
从“react native”导入{View，TextInput}；
类SecondScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文本：“”，
};
}
render（）{
返回(
);
}
onChangeText（文本）{
this.setState（{text}）；
}
戈巴克（）{
this.props.callback&&this.props.callback（this.state.text）；
navigation.pop（）；
}
}
导出默认第二屏幕；

1）通过使用状态，我们可以将数据从一个组件传输到另一个组件

 this.setState({
 userName: val.userName,
 userId: val.userId
});

2） 窗口本地存储属性

通过在javascript中使用localStorage，我们可以存储项并获取所需的内容

---

最好的方法是使用redux。Redux允许您在一个地方管理所有状态。异步存储也是一个选项，但不推荐使用。如果您使用react导航，最好的方法是像这样将数据传递到下一个屏幕

navigation.navigate('SecondScreen', { myText: 'My text' });

您可以将“我的文本”更改为状态变量。 在下一个屏幕上，您可以使用

navigation.getParam('myText') //exact name of the key that was passed in previous screen.

---

这将返回上一个屏幕中传递的值

您能再解释一下回调函数吗？请

navigation.getParam('myText') //exact name of the key that was passed in previous screen.