Question

我在DrawerNavigator中使用reactnavigation创建导航堆栈。

我从客户列表屏幕导航到客户注册屏幕。注册客户时，我想返回所有已注册客户列表的列表屏幕。但是当我返回到客户端列表屏幕时，未调用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 });
   }

}

如何使用堆栈强制调用componentWillMount方法？

2 个答案: