Как заставить вызов метода componentWillMount, используя стеки?

Question

Я использую реагирующую навигацию с DrawerNavigator для создания стека навигации.

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

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

Я искал в Интернете и увиделчто я могу использовать redux или mobx для управления состояниями. Но мой проект настолько мал, что я не вижу необходимости использовать что-то подобное.Есть ли способ сделать это простым способом?

Я читал кое-что о Context API, кто-нибудь знает, могу ли я решить проблему с ним?

Answer 1

На вашем ListScreen вы можете сделать это:

  componentDidMount() {
    this.navigationListener = this.props.navigation.addListener(
      'willFocus',
      this.stuffsYouWantToDo
    )
  }

Так что каждый раз, когда вы возвращаетесь к ListScreen, он вызывает функцию stuffsYouWantToDo.

Answer 2

Вы можете использовать два метода для этого.

1) с помощью обратного вызова

На вашем экране списка ,когда вы открываете экран регистрации, он передает реквизиты обратного вызова.

class ListingScreen extends Component {

    // this method will call when you back from register screen to listing screen
    getRegisterUserList(listOfRegisterUser) {
        this.setState({ listOfRegisterUser: listOfRegisterUser }) //do whatever fuctionality you want to perform with listOfRegisterUser
    }

    render() {
        const navigation = this.props.navigation;
        return (
            <TouchableOpacity onPress={navigation.navigate('RegisterScreen', { callback: this.getRegisterUserList.bind(this) })}> // pass callback when you call your register screen
                <Text>Navigate to register screen</Text>
            </TouchableOpacity>
        )
    }
}

И на вашем экране регистрации , после успешной регистрации вызовите этот обратный вызов и передайте в нем свой список.

if (this.props.navigation.state &&
            this.props.navigation.state.params &&
            this.props.navigation.state.params.callback) {
            this.props.navigation.state.params.callback(registerUserList); //you can pass your list here
        }
        this.props.navigation.goBack(null); //this is for back from register screen to listing screen

2) использование DeviceEventEmiter

Добавить прослушиватель на экран списка

import { DeviceEventEmitter } from 'react-native';

    class ListingScreen extends Component {

    componentWillMount(){
     this.registerUserListener= 
         DeviceEventEmitter.addListener('RegisterUser', (e) => {
            //when you successfully register. this listener is called
           // perform your logic for getting register user list
        });
    }
    componentWillUnmount() {
        this.registerUserListener.remove();
    }

    }

И на экране регистрации вызовите этого прослушивателя, когда пользователь успешно зарегистрирован.

import { DeviceEventEmitter } from 'react-native';

class RegisterScreen extends Component {

//emit listener when user is successfully register
   successfullyRegisterUser(){
      DeviceEventEmitter.emit('RegisterUser', { isRegister: true });
   }

}