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

【问题标题】：React Native: Finish current screen (component) after on pressReact Native：按下后完成当前屏幕（组件）
【发布时间】：2018-11-06 05:31:51
【问题描述】：

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

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

屏幕 B

我正在寻找的是在按下按钮后关闭/完成屏幕 B，并具有如下所示的流程：

屏幕 A -> 屏幕 B（完成屏幕并返回）-> 屏幕 A

尽管如此，当我在返回屏幕 A 后按下 Android 设备中的后退箭头按钮时，应用程序仍会返回屏幕 B :(

Screen 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>
    );
  }
}

Router 的 Stack Navigator 如下所示：

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

一旦按下更新按钮，有什么方法可以为屏幕 B 调用 finish() （比如当我们完成 Android Activity 时）？我认为这样一来，在背面按下屏幕 A 不会回到屏幕 B。

提前致谢

【问题讨论】：

你能把你写的东西贴出来完成 B 吗？ dimissScreen() { // 完成这个组件 }
导航是一个视图数组，您可以删除索引处的视图，它的工作。
@TheHound.developer 实际上这是我的问题，在那里写什么？大声笑

标签： android react-native react-navigation

【解决方案1】：

如果你不能在同一个堆栈中，你可以使用它来返回

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

如果您在同一个堆栈中并想返回上一个屏幕，也可以使用 pop

onPress={() => this.props.navigation.pop()}

如果你想返回两个屏幕试试这个

this.props.navigation.pop(2)

【讨论】：

实际上你对 onPress={() => this.props.navigation.goBack(null)} 的回答奏效了！随时更新它以将其标记为正确的，谢谢！
@MuhammadShaheem 如果我想通过完成它们返回两个屏幕，该怎么办？
@S.M.Asif 请检查一下，我刚刚更新了它，检查一下是否适合你。

【解决方案2】：

这对我来说很好用

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

【讨论】：

【解决方案3】：

请尝试以下代码

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

【讨论】：

这个答案的第一部分应该是评论
onPress={() => this.props.navigation.goBack(null)}