Как передавать состояние между экранами в React Native

Question

Это экран 1, на котором я должен передать состояние текста кнопки.

export class EditProfile extends Component {
  constructor(props) {
    super(props);
    this.navigateToName = this.navigateToName.bind(this);
    this.navigateToAboutMe = this.navigateToAboutMe.bind(this);
    this.navigateToInterests = this.navigateToInterests.bind(this);

    this.state = {
      showing: true,
      aboutUser: {
        buttonText: "hey",
        showing: false,
      },
    };
  }
  navigateToName = () => {
    this.props.navigation.navigate("CreateProfile", {
      showing: false,
    });
  };
  navigateToAboutMe = () => {
    this.props.navigation.navigate("AboutUser", {
      aboutUser: this.state.aboutUser,
    });
  };
  navigateToInterests = () => {
    this.props.navigation.navigate("Interests", { showing: false });
  };

  render() {
    return (
      <View>
        <View style={ProfileEditStyle.justifyImage}>
          <Image
            style={ProfileEditStyle.image}
            source={require("../../Graphics/jessica_alba.jpg")}
          />
        </View>
        <View>
          <Text style={ProfileEditStyle.basictext}>Basic Info</Text>
          <TouchableOpacity style={ProfileEditStyle.buttons}>
            <Text style={ProfileEditStyle.text} onPress={this.navigateToName}>
              Edit Name
            </Text>
          </TouchableOpacity>
          <TouchableOpacity style={ProfileEditStyle.buttons}>
            <Text style={ProfileEditStyle.text}>Edit Photo</Text>
          </TouchableOpacity>
          <TouchableOpacity style={ProfileEditStyle.buttons}>
            <Text style={ProfileEditStyle.text}>Edit Location</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={ProfileEditStyle.buttons}
            onPress={this.navigateToAboutMe}
          >
            <Text style={ProfileEditStyle.text}>Edit About Me</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={ProfileEditStyle.buttons}
            onPress={this.navigateToInterests}
          >
            <Text style={ProfileEditStyle.text}>Edit Interests</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default EditProfile;

Это экран 2, где я хочу, чтобы состояние buttonText изменилось в компоненте кнопки продолжения .

export class AboutUser extends Component {
          constructor(props) {
            super(props);
            this.navigatToInterests = this.navigatToInterests.bind(this);
            this.checkEntry = this.checkEntry.bind(this);
            var params = props.navigation.state.params.aboutUser;
        
            this.state = {
              value: "",
            };
      }

  

    <ContinueButton
                  text={this.props.route.params.aboutUser.buttonText}
                  color="#ff304f"
                  style={CreateAboutMe.centerButton}
                  onPress={this.navigatToInterests}
                />

Я пытаюсь выполнить условную визуализацию для компонента кнопки продолжения. Когда он на одном экране, я хочу, чтобы он сказал «продолжить», а когда он на другом маршруте, я хочу, чтобы он сказал «Сохранить и Go Назад». Однако, когда я пытаюсь изменить состояние между экранами, по какой-то причине я либо получаю ошибку параметров, либо состояние не меняется.

Answer 1

Получить параметр с предыдущего экрана:

constructor(){
   const isShowBtn = this.props.navigation.getParam("showing");

   this.state = { 
      value: isShowBtn
   }
}