Блог

Главная - Вопросы по программированию - Как мне обновить разные экраны в виде другого независимого экрана?

Как мне обновить разные экраны в виде другого независимого экрана?

#react-native

#react-native

Вопрос:

У меня есть приложение с панелью навигации с 2 экранами. Когда я применяю функцию на экране / компоненте 1, я хочу отобразить или вызвать изменение на втором экране.

есть ли способ либо повторно отобразить экран при вводе, либо обновить состояние другого экрана?

Компонент один: 

 export default class HomeScreen extends React.Component {

    constructor() {
      super();

     }

    _onPress(){
      try {
          await AsyncStorage.setItem('value', 'changed Value');
        } catch (error) {

          console.log(error.message);
        } 
        console.log("saved: "    this.state.userName )


     }

   render() {





    return (
      <View style={styles.container}>
        <Button title="btn" onPress={() => this._onPress()} >                                                                    
         </Button>
      </View>
    )

}

компонент 2:

 export default class SecondScreen extends React.Component {

    constructor() {
      super();
      this.state = {some : ''}

     }

    async getValue () {
    let recievedValue = '';
    try {
      let promise = await AsyncStorage.getItem('value') || 'cheeseCake';
      promise.then((value) => recievedValue = value) 
    } catch (error) {
      // Error retrieving data
      console.log(error.message);
    }

    return recievedValue
  }

   render() {



    var value= this.getValue();

    return (
      <View style={styles.container}>
        <Text>
             HERE CHANGED VALUE: {value}                                                              
         </Text>
        <Button onPress={()=> this.setState((prev)=> {some:'Thing'})}>    
         </Button>
      </View>
    )

}

Когда я нажимаю кнопку на экране 1 (рабочий стол), значение сохраняется.
Но это отображается только на втором экране, когда я запускаю изменение состояния нажатием кнопки.

Как мне отобразить экран при посещении экрана через панель навигации? введите описание изображения здесь

Комментарии:

1. Можете ли вы предоставить пример gif, чтобы я мог легко понять…

2. @Tanveerbyn Я предоставил gif

3. Как перейти к экрану 2 после нажатия кнопки?

4. В идеале вы должны передать значение через родительский элемент в качестве реквизита, чтобы он мог обновлять дочерние элементы. Вы пробовали использовать какие-либо компоненты жизненного цикла из React? Вы можете попробовать использовать componentDidUpdate и обновить некоторое состояние, чтобы вызвать повторный рендеринг

5. Есть панель навигации @UmairAhmed, первый элемент — первый экран, второй — экран 2. также при обновлении ничего не происходит. Я перепробовал все. Как только панель навигации получит экраны, она их отобразит. затем они остаются отображаемыми до изменения состояния.

Ответ №1:

Вы пробовали EventEmiter ?

Используйте этот пользовательский прослушиватель событий: https://github.com/meinto/react-native-event-listeners

например:

 import { EventRegister } from 'react-native-event-listeners'

/*
 * RECEIVER COMPONENT
 */
class Receiver extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            data: 'no data',
        }
    }

    componentWillMount() {
        this.listener = EventRegister.addEventListener('myCustomEvent', (data) => {
            this.setState({
                data,
            })
        })
    }

    componentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }

    render() {
        return <Text>{this.state.data}</Text>
    }
}

/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit('myCustomEvent', 'it works!!!')
        })
    ><Text>Send Event</Text></TouchableHighlight>
)