React Native返回刷新页面(this.props.navigation.goBack())

Posted 2021-03-20 james-l

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=()=>{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‘,
  },
});