在 react-native 中更新屏幕之间的参数值

Question

in my 2 screens react-native app, I'd like to know which is the best way to do the following:

In the main screen, a simple Text component shows "Hello" and a button that leads to a screen that shows "Hello" in an input field and a "GoBack" button.

By modifying the input and after pressing the "GoBack" button, I want the Text component in the main screen to be updated with the text previously inserted.

Which is the best approach to do this?

TY in advance

Answer 1

I found the answer by myself.

First of all, in home screen, declare a useState const like this:

const [text, setText] = useState("Hi all, to be modified");

Then, in the Home Screen Button, we have to pass the "coordinate" to the second screen

onPress={() => navigation.navigate('SecondScreen',
                {
                    textParam: text
                })}

In the "SecondScreen" we have to:

1: read the value of the params and set it to a new useState const

const [text, setText] = useState(route.params.textParam);

2: set the InputText

 <TextInput defaultValue={text} onChangeText={setText}/>

3: pass the updated value back

onPress={() => navigation.navigate({
            name: 'Home',
            params: { textParam: text },
            merge: true,
          })}

Finally, in the HomeScreen, we could use useEffect hook in order to update our value

useEffect(() => {
    if (route.params?.textParam) {
        setText(route.params.textParam);
    }
  }, [route.params?.textParam]);