React Native返回刷新页面(this.props.na

this.props.navigation.navigate('NewScreen')到一个新页面之后,通过this.props.navigation.goBack()返回时不会走生命周期方法，所以无法在生命周期方法中进行刷新页面。有如下两种方法进行页面刷新。

• 通过传递一个callback函数作为参数，在goBack前或后调用callback方法。
• 通过在goBack前或后发送通知。是通过EventEmitter实现事件机制，实现简单的观察者模式，类似于IOS中的Notification。发送端发送通知，接收端接受到通知后，通过状态机来改变渲染。发送端和接受端同时需要引入DeviceEventEmitter组件。

callback函数刷新。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class HomeScreen extends Component {
    constructor(props){
        super(props);
    }
    static navigationOptions = {
        title: '首页',
      };
    _refresh=()=>{
        console.log('refresh')
        alert('刷新哈!')
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Button
                    onPress={()=>{
                        this.props.navigation.navigate('NewsScreen',{
                            refresh:()=>{
                             this._refresh();
                            },
                        })
                    }}
                    title="新闻"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

export default class NewsScreen extends Component {
  constructor(props) {
    super(props);
  }
  static navigationOptions = {
    title: '新闻',
  };
  render() {
    return (
      <Button
      title="国际新闻"
      onPress={
        () => { 
          this.props.navigation.goBack() 
          this.props.navigation.state.params.refresh();
        }
      }
    />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

发送通知DeviceEventEmitter刷新。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button,
    DeviceEventEmitter,
} from 'react-native';

export default class HomeScreen extends Component {
    constructor(props){
        super(props);
        this.state = ({
            newMessage:'',
            messageCount:0,
        })
    }
    static navigationOptions = {
        title: '首页',
      };
    _refresh=()=>{
        console.log('refresh')
        alert('刷新哈!')
    }
    componentDidMount(){
        this.refreshSubScription = DeviceEventEmitter.addListener('refresh',(message)=>{
            if(message)
            {
                alert('收到通知啦!')
                this.setState({
                    newMessage:message.message,
                    messageCount:message.messageCount,
                })
            }
        })
    }
    componentWillUnmount(){
        this.refreshSubScription.remove();
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Button
                    onPress={()=>{
                        this.props.navigation.navigate('NewsScreen',{
                            refresh:()=>{
                             this._refresh();
                            },
                        })
                    }}
                    title="新闻"
                />
                <Text style={{marginTop:20}}onPress={()=>{this.props.navigation.navigate('VideoScreen')}}>
                视频
                    </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  DeviceEventEmitter,
} from 'react-native';
export default class VideoScreen extends React.Component {
  constructor(props) {
    super(props);
  }
  static navigationOptions = {
    title: '视频',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="有趣视频"
        onPress={
          () => { 
            this.props.navigation.goBack() 
            DeviceEventEmitter.emit('refresh',{
              'newMessage':'新消息',
              'messageCount':5,
            })
          }
        }
      />
    );
  }
}

Simulator Screen Shot - iPhone X - 2019-01-03 at 01.55.54.png
Demo地址