React Native返回刷新页面(this.props.navigation.goBack())



import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button
} from ‘react-native‘;

export default class HomeScreen extends Component {
    constructor(props){
        super(props);
    }
    static navigationOptions = {
        title: ‘首页‘,
      };
    _refresh=()=>{alert(‘返回刷新哈!‘)
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Button
                    onPress={()=>{
                        this.props.navigation.navigate(‘NewsScreen‘,{
                            refresh:()=>{
                             this._refresh();
                            },
                        })
                    }}
                    title="新闻"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#F5FCFF‘,
    },
    welcome: {
        fontSize: 20,
        textAlign: ‘center‘,
        margin: 10,
    },
});
import React, { Component } from ‘react‘;
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button
} from ‘react-native‘;

export default class NewsScreen extends Component {
  constructor(props) {
    super(props);
  }
  static navigationOptions = {
    title: ‘新闻‘,
  };
  render() {
    return (
      <Button
      title="点我试试"
      onPress={
        () => {
          this.props.navigation.goBack()
          this.props.navigation.state.params.refresh();
        }
      }
    />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
});

原文地址:https://www.cnblogs.com/james-L/p/12101907.html

时间: 2024-11-07 18:31:02

React Native返回刷新页面(this.props.navigation.goBack())的相关文章

React Native 快速入门之认识Props和State

眼下React Native(以后简称RN)越来越火,我也要投入到学习当中.对于一个前端来说,还是有些难度.因为本人觉得这是一个App开发的领域,自然是不同.编写本文的时候,RN的版本为0.21.0.我们马上以代码进入今天的学习. 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native'; class Hello extends Component { re

HTML5 使用sessionStorage实现特定页面返回刷新页面

需求:在某个列表页面跳转到增加新项目页面后需要返回到前一个页面 并且数据最新数据.刚开始是做法是 history.back();方法 返回后页面不会自动刷新的.在新的页面重新访问之前页面的链接可以访问到新加载了新数据的页面,但这样子也会导致页面加载过多占内存. 这个时候可以用sessionStorage来存储临时变量来判断 母页面: window.onload = function () { var data = sessionStorage.getItem("FirstLoad");

React Native移动开发实战-3-实现页面间的数据传递

React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件中指定的,而且一经指定,在被指定的组件的生命周期中则不再改变. state通常是用于存储需要改变的数据,并且当state数据发生更新时,React Native会刷新界面. 了解了props与state的区别之后,读者应该知道,要将首页的数据传递到下一个页面,需要使用props.所以,修改home.

React Native八大Demo

参考资料:http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的组合效果 7.图片下拉放大 8.原生视频播放器 9.react-navigation的使用和变更 10.倒计时 11.多张图片查看 12.自

全栈工程师之路-React Native之扫描二维码

前言 以前开发移动端页面,总会被原生开发各种嫌弃,H5性能太低,动画不流畅,身为一名小前端我能怎么办呢?总是在无人的夜里,心里默默地流泪~ 后来 React Native 出来以后,终于可以翻身农奴把歌唱:哈哈哈,原生的小X人们,等待我 RN 的小皮鞭吧,pia~ 但是那时候若是不懂点 Android 或者 iOS,完全用 RN 开发一个 App,是非常痛苦的. 在尝试一段时间以后,由于实在难以忍受调教各种莫明其妙的报错,让我一度对这项新技能又爱又恨,望而生畏~ 但是最近由于项目上的需求又捡了起

React Native 继续学习

下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的组合效果 7.图片下拉放大 8.原生视频播放器 9.react-navigation的使用和变更 ...... 1.微信及朋友圈分享,微信支付: https://github.com/yorkie/react-native-wechat QQ分

React Native自定义导航栏

之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了, 效果如下: 我们需要创建一个 NaviBar.js 用来显示顶部的导航栏, 还需要四个界面(Page1.js,Page2.js,Page3.js,Page4.js). 当然还需要修改index.android.js或者index.ios.js 用来处理4个界面的切换. 导航栏NaviBar 实现

React Native导航器之react-navigation使用

在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigation.在讲react-navigation之前,我们先看一下常用的导航组件. 导航控件 常见的导航主要分为三种: 1.StackNavigator :类似于普通的Navigator,屏幕上方导航栏 2.TabNavigator:obviously, 相当于iOS里面的TabBarController,屏幕下方标签栏 3.DrawerNavi

【转】在Windows下搭建React Native Android开发环境

http://my.oschina.net/jackzlz/blog/508210 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变量. 安装Android SDK 可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装.推荐使用Android Studio,以下说明会默认以Android Studio的方式说明.请注意选择x86还是x64版本. 为了加速下载,推荐从