Как установить реквизиты родителя, нажав кнопку в дочернем компоненте

Question

Я хочу установить title моего экрана на конкретное c значение, когда я нажимаю кнопку на другом экране.

Итак, в конце я хочу достичь следующего. Из моего HomeScreen я попадаю в ChangeScreen, где могу сохранить профиль пользователя. Теперь на этом экране, когда пользователь отправляет свой name, это имя должно отображаться, например, в заголовке заголовка.

Я все еще пропускаю часть, где данные передаются из ChangeScreen в App.js.

Я уже нашел очень похожий вопрос, но не смог применить эти решения:

• Невозможно передать состояние другому компоненту [response-native]
• Как мне вызвать setState из другого компонента в ReactJs

Найдите мою закуску здесь .

Приложение. js

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

import Home from './components/HomeScreen';
import Change from './components/ChangeScreen';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
const Stacks = createStackNavigator();
 
class App extends React.Component {
  state = {
    newtitle : 'foo'
  }
  
  handleLoginnameChange = newtitle => {
    this.setState({ newtitle })
  }

  render() {
    return (
      <NavigationContainer>
        <Stacks.Navigator
          headerMode="screen"
          screenOptions={{
            //headerTitle: this.state.newtitle,
            //headerTitle: props => <Change {...props} />
          }}
        >
        <Stacks.Screen
          name="home"
          component={Home}
          options={
            { 
              title: 'Home'
            }
          }
        />
        <Stacks.Screen
          name="change"
          component={Change}
          options={
            { 
              title: 'Change' 
            }
          }
        />
        </Stacks.Navigator>
      </NavigationContainer>
    );
  }
}

export default (App);

Главный экран. js

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

class HomeScreen extends React.Component {
  render() {
    return (
      <View> 
        <Text>Hi, this is a test of change the title from another component</Text>
        <Button title='To the Change title screen' onPress={() => this.props.navigation.navigate('change')}>Change</Button>
      </View>
    ); 
  }
}
export default HomeScreen;

Изменить экран. js

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

class ChangeScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Clicking this button will change the Header title to "TEST" and going back to Home.</Text>
        <Button title='Save' onPress={() => this.props.navigation.navigate('home')}>Home</Button>
    // on that button I need the setState or something similar like a onChange or onClick handler
      </View>
    );
  }
}
export default ChangeScreen;