React-Native中navigator.pop()後如何更新前一個頁面

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/u010046908/article/details/52453794

1、問題提出

React-Native中navigator.pop()後如何更新前一個頁面，這是一個最為常見得問題。

2、問題的描述

比如說，我們開發應用的時候，上傳頭像是一個最為常見的功能，我點選選擇打開圖庫的按鈕之後，push到圖庫的頁面，我們在上傳成功後，需要pop回到目前頁面，并把圖檔路徑傳到目前頁面。

3、React-Native中的解決辦法

這個問題對于一個有Android和ios開發經驗的程式員首先想到的就是回調函數或者廣播機制等。其實在React-Native中同樣也可用回調函數來解決這個問題。本來想以android來舉例實作，最後還是算了直接上React-Native吧。

1. 在A頁面中實作一個聲明一個函數refresView()
2. 在A頁面push參數中增加一個回掉函數callBack(msg)
3. 在B頁面pop時候調用callBack将值傳回，更新界面

4.代碼的實作

4.A頁面的實作

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Navigator,
  ToastAndroid,
  View
} from 'react-native';
import Button from './Button';
import Test from './test';
var _navigator;
 var d;
class Hello2 extends Component {

  constructor(props){
     super(props);
      d = this;
      this.state = {city:''}
    //  this.refeshView = this.refeshView.bind(this);                      
  }

 configureScene(route){
      return Navigator.SceneConfigs.FadeAndroid;
    }

    refeshView(msg){
    console.log('重新整理');
    d.setState({'city':msg});
    console.log('end');
    }

    renderScene(router, navigator){
      console.log(d);
      _navigator = navigator;
      if(router.id === 'main'){
      return <View style={styles.container}>
      <Button  onPress={() => {
               console.log('start');
                _navigator.push({title:'MainPage',id:'page',callBack:(msg)=>{
                 console.log(d);
                 d.refeshView(msg);
                 console.log('end');}});     
          }} text={'打開'} style={styles.instructions} disabled = {false}/>

        <Text style={styles.welcome}>
          {d.state.city}
        </Text>
        <Text style={styles.instructions}>

        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>


      </View>
      }else if(router.id === 'page'){

        return (
        <Test navigator={navigator} router={router}/>
      );
      }
    }

  render() {
    return (
 <Navigator
                initialRoute={{ title: 'Main', id:'main'}}
                configureScene={this.configureScene}
                renderScene={this.renderScene} />

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Hello2', () => Hello2);
           

4.2、B頁面的實作

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
var _navigator;
import Button from './Button';
class Test extends Component {

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

        <Button  onPress={() => {
             console.log(this.props);
             this.props.router.callBack('I am a Student');
             this.props.navigator.pop();
          }} text={'傳回'} style={styles.instructions} disabled = {false}/>

      </View>
    );

}



}

const styles = StyleSheet.create({
  instructions: {
    textAlign: 'center',
    color: '#126798',
    marginTop: 50,
  }
});

module.exports = Test;           

代碼非常的簡單，謝謝大家學習。

5、效果展示