Как получить данные из следующего экрана, используя textInput на предыдущий экран, который использует только текстовое поле в реагировать родной

Question

Это мой код. Это просто экран тестирования. Навигация осуществляется на обоих экранах. Я начинающий, так что я не знаком с редуксом. Я хочу, чтобы при вводе пользователем текста на втором экране на первом экране появлялся тот же текст, что и для имени пользователя, когда пользователь переключался со второго на первый экран. Пожалуйста, помогите мне. Спасибо.

    import React, { Component } from 'react';
    import { View, Text } from 'react-native';

    class FirstScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
        };
      }

      render() {
        return (
          <View>
            <Text> UserNAme </Text>
          </View>
        );
      }
    }

    export default FirstScreen;



    import React, { Component } from 'react';
    import {View, TextInput} from 'react-native';

    class SecondScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
        };
      }

      render() {
        return (
          <View>
            <TextInput/>
          </View>
        );
      }
    }

    export default SecondScreen;

Answer 1

Лучший способ сделать это - использовать приставку. Redux позволяет вам управлять всеми состояниями в одном месте. Асинхронное хранилище также является опцией, но не рекомендуется. Если вы используете реагирующую навигацию, лучший способ сделать это - передать данные на следующий экран следующим образом.

navigation.navigate('SecondScreen', { myText: 'My text' });

Вы можете изменить «Мой текст» на переменную состояния. На следующем экране вы получаете доступ к данным, используя

navigation.getParam('myText') //exact name of the key that was passed in previous screen.

. Это вернет вам значение, которое было передано на предыдущем экране

Answer 2

1) с помощью состояния мы можем передавать данные одного компонента другому компоненту

 this.setState({
 userName: val.userName,
 userId: val.userId
});

https://facebook.github.io/react-native/docs/state

2) Окно Свойство localStorage

с использованием localStorage вjavascript мы можем хранить товар и получить там, где вы хотите

https://www.w3schools.com/jsref/prop_win_localstorage.asp

Answer 3

Поскольку вы не используете глобальное хранилище / состояние, поэтому для передачи значения на предыдущий экран вы можете передать его в качестве параметра при переходе на предыдущий экран и использовать его там.

Но если у вас естьтребование использования значения на нескольких экранах, вы должны использовать глобальное состояние / хранилище. (вы можете использовать mobx, так как он прост в изучении и может использоваться для небольших приложений)

Надеюсь, это поможет ...

Answer 4

Есть 2 способа решить эту проблему:

1. Использование Redux. Redux дает вам возможность сохранять данные и получать к ним доступ на любом экране.

2. Вы можете передать функцию обратного вызова на следующий экран и вызвать ее на втором экране перед функцией pop.

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class FirstScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
    };
  }

  render() {
    return (
      <View>
        <Text>{this.state.username}</Text>
      </View>
    );
  }

  callback(username) {
    this.setState({ username });
  }

  goToSecondScreen() {
    // Depends on your navigation library
    navigation.push('SecondScreen', {
      callback: this.callback,
    });
  }
}

export default FirstScreen;

import React, { Component } from 'react';
import { View, TextInput } from 'react-native';

class SecondScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }

  render() {
    return (
      <View>
        <TextInput onChangeText={this.onChangeText} />
      </View>
    );
  }

  onChangeText(text) {
    this.setState({ text });
  }

  goBack() {
    this.props.callback && this.props.callback(this.state.text);
    navigation.pop();
  }
}

export default SecondScreen;

Answer 5

Вы можете использовать служебный файл PubSub (https://www.npmjs.com/package/pubsub-js)) или сохранить значение в локальном хранилище на втором экране и получить на первом экране.

Сохранить значение на локальномхранить как показано ниже:

try {
       await AsyncStorage.setItem(
           key,
           value
       )

   } catch (error) {
   }

Получить значение:

try {
        return await AsyncStorage.getItem(key)
    } catch (error) {
    }