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}
                />

我正在尝试为继续按钮组件进行条件渲染。当它在一个屏幕上时，我要它说“继续”，而当它在另一条路线上时，我要它说“保存并返回”。但是，当由于某种原因尝试在屏幕之间更改状态时，我会收到参数错误或状态不会更改。

Answer 1

从上一屏幕获取参数：

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

   this.state = { 
      value: isShowBtn
   }
}

如何在React Native中在屏幕之间传递状态

1 个答案: