Как обновить предыдущий экран, когда я иду обратно () - PullRequest
Новая
       3

Как обновить предыдущий экран, когда я иду обратно ()

0 голосов
/ 27 апреля 2019

Я новичок в реакции-родной. Теперь мне нужно реализовать функцию на двух экранах. Когда я щелкаю нижнюю часть сцены «addActivity», она возвращается к «homeScene», которая является предыдущей сценой «addActivity», и отображает данные из сцены «addActivity».

Я пытаюсь сохранить данные в сцене «addActivity» по карте: 

export const m = new Map();

И импортировать карту в сцену homeScene 

import { m } from './addActivity';

Я не уверен, что этот способ хорош. Я видел, что есть некоторые функции response-native-navigation, которые могут передавать параметры, но я не знаю, как их использовать. Сейчас самое важное - как обновить сцену homeScene, когда я использую goBack () из сцены addActivity. Существует код двух сцен

homeScene.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>

        );

    }
}

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>
    );
  }
}

Я ожидаю, что когда я использую goBack () для homeScene, сцена может обновиться, и данные из сцены addActivity можно распечатать на homeScene

1 Ответ

1 голос
/ 28 апреля 2019

Чтобы обновить предыдущий экран на задней панели, вы можете использовать этот код на экране, на котором вы хотите обновить состояния компонентов при возврате с некоторого экрана 

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

    }

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

где getMoviesFromApiAsync() - метод, содержащий код для вызова API.

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

...