React-Native中navigator.pop()后如何更新前一个页面

Myth丶恋晨 2022-07-18 05:29 133阅读 0赞

## 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、效果展示 ##

![这里写图片描述][20160906212709417]

![这里写图片描述][20160906212729182]

![这里写图片描述][20160906212748979]

[20160906212709417]: /images/20220717/448761f0eded4c0fb5aefd719fb6e9e8.png
[20160906212729182]: /images/20220717/d6bc15fc7c9a42e3a22ddc5c2d14e650.png
[20160906212748979]: /images/20220717/d4709e57e30847f487c043eef71910e4.png