Javascript 如何在我返回时刷新上一个屏幕（）

我是个新来的本地人。现在我需要在两个屏幕中实现一个函数。当我在“addActivity”场景中单击底部时，它将返回到“homeScene”，这是“addActivity”的前一个场景，并显示“addActivity”场景中的数据

我尝试通过地图将数据存储在“addActivity”场景中：

export const m = new Map();

并在homeScene场景中导入地图

import { m } from './addActivity';

我不确定这种方式是否好。我看到react native navigation的一些功能可以传递参数，但我不知道如何使用它们。 现在最大的问题是，当我使用“addActivity”场景中的goBack（）时，如何刷新“homeScene”场景。 有两个场景的代码

homesene.js

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

import { m } from './addActivity';


export default class LeftSideMenu extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
        }

    add = () => {
        const { navigate } = this.props.navigation;  
        navigate('Add');  
    }

render() {
        return (

                <View style={styles.container}>
                    //I want to show the data here
                    <Text
                        style={styles.btText2}>{m.get("title")}</Text>

                    //This is the bottom to jump to "addActivity" scene
                    <TouchableOpacity
                        onPress={this.add} 
                        style={styles.Addbutton}>
                        <Text
                            style={styles.btText2}>+</Text>
                    </TouchableOpacity>
                </View>

        );

    }
}

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
文本输入，
看法
可触摸不透明度，
尺寸
}从“反应本机”；
从“/addActivity”导入{m}；
导出默认类LeftSideMenu扩展组件{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：错，
}
添加=（）=>{
const{navigate}=this.props.navigation；
导航（“添加”）；
}
render（）{
返回(
//我想在这里显示数据
{m.get（“title”）}
//这是跳转到“addActivity”场景的底部
+
);
}
}

addActivity.js

import React, { Component } from 'react';
import { View, ScrollView, Dimensions, StyleSheet, Text, Button, TouchableOpacity, Alert } from 'react-native';

import { NavigationPage, ListRow, Input, Select, Label } from 'teaset';

let { height, width } = Dimensions.get('window');

//initial the map
export const m = new Map();

export default class InputExample extends Component {


  constructor(props) {
    super(props);
    this.state = {
      length: 0,
      title: '',
      isVisible: false,
    };
    Object.assign(this.state, {
      valueTitle: null,
    });
  }


//Return  to homeScene
  homeScene = () => {
    m.set("title", this.valueTitle);
    const { goBack } = this.props.navigation; 
    Alert.alert("Add succeed","return to Homepage",[{text: 'confirm', onPress: () => { goBack(); }}]) 

  }

  render() {
    return (
      <ScrollView style={{ flex: 1 }}>

        <ListRow title='Title *' detail={
          <Input
            style={{ width: 200 }}
            size='md'
            value={this.state.valueMD}
            placeholder=''
            onChangeText={text => this.setState({ valueTitle: text })}
          />
        } topSeparator='full' />

        <TouchableOpacity
          onPress={this.homeScene} 
          style={styles.button}>
          <Text
            style={styles.btText}>Confirm</Text>
        </TouchableOpacity>

      </ScrollView>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{View、ScrollView、维度、样式表、文本、按钮、TouchableOpacity、Alert}；
从'STREAST'导入{NavigationPage，ListRow，Input，Select，Label}；
设{height，width}=Dimensions.get（'window'）；
//在地图上签名
导出常量m=新映射（）；
导出默认类InputExample扩展组件{
建造师（道具）{
超级（道具）；
此.state={
长度：0，
标题：“”，
isVisible:false，
};
Object.assign（this.state{
valueTitle:null，
});
}
//回归家园
homeScene=（）=>{
m、 set（“title”，此为.valueTitle）；
const{goBack}=this.props.navigation；
Alert.Alert（“添加成功”、“返回主页”[{text:'confirm'，onPress:（）=>{goBack（）；}}}]）
}
render（）{
返回(
}topSeparator='full'/>
证实
);
}
}

---

我希望当我使用goBack（）到homeScene时，场景可以刷新，来自addActivity场景的数据可以打印在homeScene上。为了刷新背面的上一个屏幕，您可以在希望从某个屏幕返回时更新组件状态的屏幕中使用此代码

componentDidMount()
     this.getMoviesFromApiAsync()
     this.props.navigation.addListener('willFocus',this._handleStateChange);

    }

   _handleStateChange = state => {
   alert('Refreshed successfully!')
   this.getMoviesFromApiAsync()
 };

其中

getMoviesFromApiAsync（）

是包含API调用代码的方法

或 您可以使用Redux实现同样的效果