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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/52453794 1、问题提出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、效果展示

这里写图片描述

这里写图片描述

这里写图片描述

相关文章
|
2月前
|
存储 前端开发 JavaScript
react怎么实现跨页面传参
react怎么实现跨页面传参
99 2
|
2月前
|
资源调度 JavaScript 前端开发
React-Router 5.0 制作导航栏+页面参数传递
React-Router 5.0 制作导航栏+页面参数传递
30 0
|
8月前
|
前端开发
react如何跳转页面?
react如何跳转页面?
|
2月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
2月前
|
前端开发
探索React页面导航:不只有React Router
探索React页面导航:不只有React Router
|
8月前
|
JavaScript 前端开发 虚拟化
理解React页面渲染原理,如何优化React性能?
理解React页面渲染原理,如何优化React性能?
75 0
|
11月前
|
前端开发
React返回上个页面
React返回上个页面
86 0
|
2月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
55 0
|
2月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
38 0
|
7月前
|
前端开发
写一个react 的页面 录像组件
写一个react 的页面 录像组件
30 0