React Native: завершить текущий экран (компонент) после нажатия - PullRequest
0 голосов
/ 06 ноября 2018

У меня есть приложение React Native на базе Android, и я перехожу с экрана A на экран B.

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


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

И Stack Navigator Маршрутизатора выглядит следующим образом:

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

Есть ли способ сортировки вызова finish () для экрана B (например, когда мы заканчиваем Android Activity ) после нажатия кнопки обновления? Я думаю, таким образом, при нажатии на спину Экран A не вернется к Экран B.

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

пожалуйста, попробуйте следующий код

  <Button
      onPress={() => goBack()}
      title="Update"
    />
0 голосов
/ 06 ноября 2018

Вы можете использовать это, чтобы вернуться

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

//if I want to go two screens back try this

this.props.navigation.pop(2)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...