React Native：按下后完成当前屏幕（组件）

Question

我有一个基于Android的React Native应用，并且正在从屏幕A导航到屏幕B。

屏幕B是具有文本输入并使用更新按钮保存新值的组件。

---

屏幕B

我正在寻找的是在按下按钮后关闭/结束屏幕B，并且流程如下所示：

屏幕A->屏幕B（完成屏幕，然后返回）->屏幕A

尽管如此，当我回到屏幕A后在Android设备中按“后退箭头”按钮时，该应用仍会返回屏幕B：（

屏幕A

中的渲染方法

  render() {
    return (
      <View style={styles.container}>
        <View styleName="horizontal" style={styles.row}>
          <Text style={styles.captionDarkGray}>
            {this.props.user.name}
          </Text>
          <View style={styles.alignHorizontalRight}>
            <Text
              style={styles.editButton}
              onPress={() =>
                this.props.navigation.navigate("ScreenB", {
                  fieldName: "Name",
                  fieldValue: this.props.user.name
                })
              }
            >
              Edit
            </Text>
          </View>
        </View>
      </View>
    );
  }

屏幕B 的代码是：

export class ScreenB extends Component {
  constructor(props) {
    super(props);
  }

  dimissScreen() {
    // Finish this Component
  }
  render() {
    const fieldName = this.props.navigation.getParam("fieldName", "NO-ID");
    const fieldValue = this.props.navigation.getParam("fieldValue", "NO-ID");

    return (
      <View style={styles.container}>
        <StatusBarBackground />
        <View style={styles.globalBar}>
          <Text style={(styles.h3, { marginLeft: 10 })}>
            Update {fieldName}
          </Text>
        </View>
        <View style={localStyles.content}>
          <TextInput
            placeholder={fieldValue}
            defaultValue={fieldValue}
            style={(styles.formFieldEditText, localStyles.editText)}
            onSubmitEditing={() => this.phoneNumberInput.focus()}
            keyboardType="default"
            autoCapitalize="words"
            autoCorrect={true}
            placeholderTextColor={Colors.grayDark}
            maxLength={30}
          />

          <ButtonMm onPress={() => this.dimissScreen()}>Update</ButtonMm>
        </View>
      </View>
    );
  }
}

路由器的堆栈导航器如下所示：

export const RootAppNavigator = createStackNavigator(
  {
    ScreenA: {
      screen: ScreenA,
      navigationOptions: { header: null }
    },
    ScreenB: {
      screen: ScreenB,
      navigationOptions: { header: null }
    },
    OtherScreen: {
      screen:...

一旦按下更新按钮，是否可以通过某种方式调用屏幕B的 finish（）（就像我们完成 Android活动时一样）？ 我认为，以这种方式，按下屏幕A不会回到屏幕B。

预先感谢

Answer 1

您可以使用它来返回

onPress={() => this.props.navigation.goBack(null)}

Answer 2

这对我来说很好

 this.props.navigation.replace('YourPageRoot');

Answer 3

请尝试以下代码

  <Button
      onPress={() => goBack()}
      title="Update"
    />