native刷新 react

2019-06-27 09:58:39 ReturnNull0 阅读数 628
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

在React Native中可以通过setState实现刷新组件,setState会触发render()方法重新渲染,页面布局复杂的时候会遇到性能问题,React Native提供局部刷新组件的方法setNativeProps,使用如下

<View
    ref={(c) => this.refView = c}>

</View>

在需要触发局部更新组件的事件中调用方法,通过组件引用调用组件的setNativeProps方法实现组件的局部刷新,组件自身的所用的属性都可以设置,这里示例只是刷新组件的backgroundColor,想要刷新组件的其他属性可自行添加和设置。

onPressEvent() {
    this.refView.setNativeProps({
        style: {backgroundColor: '#f1f1f1'}
    });
}

2020-04-18 10:40:43 asdfgh0077 阅读数 50
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

本文翻译自:What is the difference between React Native and React?

I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. 我已经出于好奇而开始学习React ,并想知道React和React Native之间的区别-尽管使用Google找不到满意的答案。 React and React Native seems to have the same format. React和React Native似乎具有相同的格式。 Do they have completely different syntax? 它们的语法完全不同吗?


#1楼

参考:https://stackoom.com/question/2LLrC/React-Native和React之间有什么区别


#2楼

ReactJS is a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications. ReactJS是一个JavaScript库,它支持前端Web并在服务器上运行,用于构建用户界面和Web应用程序。

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood. React Native是一个可编译为本机应用程序组件的移动框架,允许您使用JavaScript构建适用于不同平台(iOS,Android和Windows Mobile)的本机移动应用程序,从而允许您使用ReactJS来构建组件,并在罩。

Both are open sourced by Facebook. 两者均由Facebook开源。


#3楼

ReactJS is a framework for building an hierarchy of UI components. ReactJS是用于构建UI组件层次结构的框架。 Each component has state and props. 每个组件都有状态和道具。 Data flows from the top to low-level components via props. 数据通过道具从顶层流向底层组件。 The state is updated in the top-level component using event handlers. 使用事件处理程序在顶级组件中更新状态。

React native uses React framework for building components for mobile apps. React native使用React框架为移动应用程序构建组件。 React native provides a basic set of components for both iOS and Android platforms. React native提供了适用于iOS和Android平台的一组基本组件。 Some of the components in React Native are Navigator, TabBar, Text, TextInput, View, ScrollView. React Native中的一些组件是Navigator,TabBar,Text,TextInput,View,ScrollView。 These components use native iOS UIKit and Android UI components internally. 这些组件在内部使用本机iOS UIKit和Android UI组件。 React native also allows NativeModules where code written in ObjectiveC for iOS and Java for Android can be used within JavaScript. React native还允许使用NativeModules,在JavaScript中可以使用用iOS的ObjectiveC和Android的Java编写的代码。


#4楼

Google can't explain this to you, as you said, but Google would be so happy if they invented React. 正如您所说,Google无法向您解释这一点,但是Google会很高兴如果他们发明了React。

Here is the React project . 这是React项目

At Facebook, they invented React so JavaScript can manipulate the website DOM faster using the virtual DOM model. 在Facebook,他们发明了React,因此JavaScript可以使用虚拟DOM模型更快地操作网站DOM。

DOM full refresh is slower compared to the React virtual-dom model , which refreshes only parts of the page (read: partial refresh). React虚拟域模型相比,DOM完全刷新的速度较慢,后者仅刷新页面的一部分(阅读:部分刷新)。

As you may understand from this video , Facebook did not invent React because they understood immediately that the partial refresh would be faster than the conventional one. 正如您从该视频中所了解的那样,Facebook并未发明React,因为他们立即了解到部分刷新将比传统刷新更快。 Originally they needed a way to reduce Facebook application re-build time and luckily this brought the partial DOM refresh to life. 最初,他们需要一种减少Facebook应用程序重建时间的方法,幸运的是,这使部分DOM焕然一新。

React native is just a consequence of React. React native只是React的结果。 It is a platform to build native apps using JavaScript. 这是一个使用JavaScript构建本机应用程序的平台。

Prior to React native you needed to know Java for Android or Objective-C for iPhone and iPad to create native apps. 在使用React native之前,您需要了解Android的Java或iPhone和iPad的Objective-C才能创建本地应用。

With React Native it is possible to mimic the behavior of the native app in JavaScript and at the end, you will get platform specific code as the output. 使用React Native,可以模仿JavaScript中本机应用程序的行为,最后,您将获得平台特定的代码作为输出。 You may even mix the native code with the JavaScript if you need to optimize your application further. 如果您需要进一步优化应用程序,甚至可以将本机代码与JavaScript混合使用。

As Olivia Bishop said in the video , 85% of the React native code base can be shared among platforms. 正如Olivia Bishop在视频中所说, React本机代码库的85%可以在平台之间共享。 These would be the components applications typically use and the common logic. 这些将是应用程序通常使用的组件和通用逻辑。

15% of the code is platform specific. 15%的代码是特定于平台的。 The platform-specific JavaScript is what gives the platform flavor ( and makes the difference in the experience ). 特定于平台的JavaScript赋予了平台风味(并带来了与众不同的体验)。

The cool thing is this platform specific code — is already written, so you just need to use it. 最酷的是该平台特定的代码-已经编写好了,因此您只需要使用它即可。


#5楼

React Js is a Javascript Library where you can develop and run faster web applications using React . React Js是一个Javascript库,您可以在其中使用React来开发和运行更快的Web应用程序。

React Native lets you build mobile apps using only JavaScript,it is used for Mobile application development . React Native允许您仅使用JavaScript构建移动应用程序,用于移动应用程序开发。 more info here https://facebook.github.io/react-native/docs/getting-started.html 更多信息在这里https://facebook.github.io/react-native/docs/getting-started.html


#6楼

React-Native is a framework, where ReactJS is a javascript library you can use for your website. React-Native是一个框架,其中ReactJS是可用于您的网站的javascript库。

React-native provides default core components (images, text), where React provides a bunch of components and make them work together. React-native提供默认的核心组件(图像,文本),其中React提供了许多组件并使它们协同工作。

2017-11-27 11:36:58 dachaoxuexi 阅读数 4419
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

##react-native 自定义封装刷新组件

###几个月没写博客了,最近一直在写react 和react-native,前几天刚发了一版基于react-native混合开发的App,这几天赶快总结下。

写过java的同学,再去学习react和react-native就会比较容易上手,并且会有一种似曾相识的感觉,不错,今天我要总结的刷新功能就和Android原生的实现很类似,在Android原生当中,可以说是家喻户晓了,在react-native中实现也是一样的简单,在rn的升级中,FlatList是listView的升级版,就好比如RecyclerView是listView的升级版一样。OK, 废话不多话说。

#目录
##1.FlatList常用的属性方法
##2.封装一个上拉加载,下拉刷新的组件


1.FlatList常用的属性方法

  1. data: ?Array 为了简化起见,data属性目前只支持普通数组。
  2. renderItem: (info: {item: ItemT, index: number}) => ?React.Element 根据行数据data渲染每一行的组件
  3. onRefresh?: ?() => void 如果设置了此选项,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
  4. refreshing?: ?boolean 在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号。
  5. onEndReachedThreshold?: ?number 决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
  6. onEndReached?: ?(info: {distanceFromEnd: number}) => void 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
  7. ItemSeparatorComponent?: ?ReactClass 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。
  8. keyExtractor: (item: ItemT, index: number) => string 此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标。
  9. ListHeaderComponent?: ?ReactClass 头部组件
  10. ListFooterComponent?: ?ReactClass 尾部组件
  11. ListEmptyComponent?: ?ReactClass | React.Element 列表为空时渲染该组件。可以是React Component, 也可以是一个render函数, 或者渲染好的element。
  12. extraData?: any 如果有除data以外的数据用在列表中(不论是用在renderItem还是Header或者Footer中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。

###注:当然还有其他的属性方法,请自行查阅文档FlatList

##2.封装一个上拉加载,下拉刷新的组件

  1. 先定义一些propTypes,利于组件的扩展使用
static propTypes = {
		renderItem: PropTypes.func.isRequired,    /* 渲染行的方法 */
		ItemSeparatorComponent: PropTypes.func,   /* 渲染行间隔的方法 */
		keyExtractor: PropTypes.func,             /* 返回每行key的方法 */
		ListFooterComponent: PropTypes.func,      /* 渲染列表底部的方法 */
		ListHeaderComponent: PropTypes.func,      /* 渲染列表头部的方法 */
		listUrl: PropTypes.string.isRequired,     /* 获取列表的url */
		fetchMethod: PropTypes.string,            /* 获取列表的请求方式(默认为get) */
		fetchParams: PropTypes.object,            /* 获取列表的请求参数 */
		pageSize: PropTypes.number,               /* 每页行数(默认20条) */
		formatData: PropTypes.func,               /* 返回列表数组的方法 */
		_ref: PropTypes.func,                     /* 获取组件实例属性 */
		auto: PropTypes.bool,                     /* 是否在加载时自动查询(默认自动) */
		showFooterBoo: PropTypes.bool,            /* 是否显示脚 */
        ref: PropTypes.func,                      /* 获取组件实例 */
	};

2.初始化当前状态state

constructor(props) {
		super(props);

		this._fetchUrl = props.listUrl;
		this._fetchParams = props.fetchParams;

		this.state = {
			list: [],            /* 列表数据 */
			pageNum: 1,          /* 当前页数 */
			count: 0,            /* 总条数 */
			refreshing: false,   /* 是否正在加载 */
			isEnd: false,        /* 是否加载完 */
			isNotList: false,    /* 是否未查询到数据 */
			isError: false,      /* 是否查询失败 */
		}
	}

3.FlatList组件属性封装

  • 渲染前准备
const { list, refreshing } = this.state;

		const {
			renderItem,
			ItemSeparatorComponent,
			keyExtractor = (...arg) => arg[1],
			ListHeaderComponent,
			extraData = {},
            showFooterBoo,
		} = this.props;
  • FlatList封装

<FlatList
				data={list}
				renderItem={renderItem}
				onRefresh={this.onRefresh}
				refreshing={refreshing}
				onEndReachedThreshold={0.2}
				onEndReached={this.onEndReached}
				ItemSeparatorComponent={ItemSeparatorComponent}
				keyExtractor={keyExtractor}
				ListHeaderComponent={this.renderListHeader}
				ListFooterComponent={showFooterBoo ? this.renderListFooter : null}
				ListEmptyComponent={this.renderListEmpty}
				ref={ref => this._listRef = ref}
				extraData={extraData}
			/>

4.data={list} 中list数据来源于引用组件处的属性

5.renderItem={renderItem} 中renderItem来源于引用组件的Item布局属性

6.onRefresh={this.onRefresh} 下拉刷新布局如下:

/**
	 * 下拉刷新
	 * @return {void}
	 */
	onRefresh = () => {
		this.setState({
			isEnd: false,
		}, () => {
			this.getList();
		});
	}
/**
	 * 获取列表
	 * @return {void}
	 */
	getList = (isRefresh = true) => {
		const {
			$fetch,
			fetchMethod = 'get',
			pageSize = 20,
			formatData = ({data}) => ({
				list: data.records,
				count: data.total,
			}),
			fetchCatch = () => {},
		} = this.props;

		const { list, pageNum, refreshing, isEnd } = this.state;

		if((refreshing || isEnd) && !isRefresh) return;

		const fetchPageNum = isRefresh ? 1 : pageNum;
		let fetchPromise;

		if(fetchMethod.toLowerCase() === 'get') {
			fetchPromise = $fetch.get(this._fetchUrl, {
				size: pageSize,
				current: fetchPageNum,
				...this._fetchParams,
			});
		} else if(fetchMethod.toLowerCase() === 'post') {
			fetchPromise = $fetch.post(`${this._fetchUrl}`, {
				...this._fetchParams,
			});
		} else {
			throw new Error('method type error! only "get" or "post"');
		}

		this.setState({refreshing: true});
		fetchPromise.then(data => {
			console.log(data);
			if(!data.success) {
				this.setState({ isError: true });
				return;
			}
			const listData = formatData(data);
			const currentList = isRefresh ? listData.list : list.concat(listData.list);
			/* 判断是否查询到数据 */
			if(fetchPageNum === 1 && listData.list.length === 0){
				this.setState({
					isNotList: true
				});
			} else {
				this.setState({
					isNotList: false
				});
			}

			/* 如果有数据则添加到列表中 */
			if(listData.list.length) {
				this.setState({
					list: currentList,
					pageNum: fetchPageNum + 1,
				});
			}
			if(currentList.length >= listData.count) {
				this.setState({
					isEnd: true
				});
			}
			this.setState({
				count: listData.count,
			});
		}).catch(err => {
			console.log(err.response);
			if(!data.success) {
				this.setState({ isError: true });
			}
			fetchCatch(err);
		}).finally(() => {
			this.setState({refreshing: false});
		});
	}

###注:get与post可以根据自己的具体需求进行优化,其中网络请求使用的fetch。

7.refreshing={refreshing} 中refreshing布尔值,是用来判断当前是否是出于刷新状态的,当处于请求数据的刷新状态时置为true。

8.onEndReachedThreshold={0.2} 当滑动比例为0.2时触发onEndReached方法;onEndReached={this.onEndReached}上拉加载实现,如下:

/**
	 * 上拉加载
	 * @return {void}
	 */
	onEndReached = () => {
		this.getList(false);
	}

###注:this.getList(false);方法同下拉刷新,参数false代表上拉加载。

9.ItemSeparatorComponent={ItemSeparatorComponent} 自定义一个分割线,如下:

export const ItemSeparator = props => {
	const {
		paddingLeft = px(40),
		backgroundColor = '#fff',
		borderColor = '#eee',
	} = props;
	return (
		<View style={{paddingLeft, backgroundColor}}>
			<View style={{height: 1, backgroundColor: borderColor}}></View>
		</View>
	);
};

10.keyExtractor={keyExtractor} 使用当前数据的id即可,如下:

keyExtractor={item => item.id}

11.ListHeaderComponent={this.renderListHeader} 头部的渲染,代码如下:

/**
	 * 渲染列表头部
	 */
	renderListHeader = () => {
		const { count } = this.state;
		const { ListHeaderComponent = () => <View></View> } = this.props;
		return ListHeaderComponent(this.state);
	}

###注:布局根据自己的需求进行定义即可。

12.ListFooterComponent={showFooterBoo ? this.renderListFooter : null} 属性showFooterBoo布尔值用来控制是否显示脚,脚的布局定义如下:


	/**
	 * 渲染列表底部
	 * @return {ReactComponent}
	 */
	renderListFooter = () => {
		const { ListFooterComponent = this.defaultListFooter } = this.props;
		const { isEnd, refreshing } = this.state;
		return this.defaultListFooter(isEnd, refreshing);
	}
/**
	 * 列表默认底部组件
	 * @return {Node}
	 */
	defaultListFooter = () => {
		return (
			<FlexView justify="center" align="center" style={styles.listFooterView}>
				{this.defaultListFooterContent()}
			</FlexView>
		);
	}
/**
	 * 列表底部显示内容
	 * @return {Node}
	 */
	defaultListFooterContent = () => {
		const { isEnd, refreshing, isNotList, isError } = this.state;
		if(isNotList) {
			return (
				<_Text>未查询到相关数据!</_Text>
			);
		}
		if(isEnd) {
			return [
				<FlexItem style={styles.listFooterLine} key={1}/>,
				<_Text key={2}>没有更多数据</_Text>,
				<FlexItem style={styles.listFooterLine} key={3}/>,
			];
		}
		if(refreshing) {
			return (
				<_Text>正在加载...</_Text>
			);
		}
		if(isError) {
			return (
				<_Text>查询失败,下拉重新加载!</_Text>
			);
		}
		return (
			<_Text>上拉加载更多</_Text>
		);
	}

###注:脚的布局可以根据自己的项目需求进行更改。

13.ListEmptyComponent={this.renderListEmpty} 空布局,没有数据,请求出错显示,代码如下:

/**
	 * 列表为空时显示的组件
	 * @return {ReactComponent}
	 */
	renderListEmpty = () => {
		return (
			<View>
				<Text>没有数据哦!</Text>
			</View>
		);
	}

14.ref={ref => this._listRef = ref} 当前实例

ok,总结就到这里了,后续我会总结更多的使用组件的~~

加群一起讨论学习在这里插入图片描述

2019-01-01 22:56:30 qq_40962320 阅读数 1213
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

完成拉下拉刷新的功能后,老板要求下拉刷新要能自定义。于是到网上找了找,发现了react-native-pull这个开源库。但是这个库本身已经很久没更新,里面使用的还是被淘汰的listView,于是我到源码看了看,把列表替换成了flatList,顺便修复了几个bug。

github地址:react-native-flatlist-pull

react-native-flatlist-pull是一个基于FlatList,支持Android和iOS的下拉刷新列表组件。是在另一个项目react-native-pull的基础上进行修改而成。主要将原项目中已经过时的ListView替换成较新的FlatList,同时去掉了原项目中存在BUG的PullView。

PullList 使用

  1. 使用npm:npm install react-native-flatlist-pull@latest --save
    使用yarn:yarn add react-native-flatlist-pull
  2. 编写代码:
  import {PullList} from 'react-native-pull';

  onPullRelease(resolve) {
    //do something
    setTimeout(() => {
          resolve();
      }, 3000);
  }
  
  <PullList
    onPullRelease={this.onPullRelease}
    // topIndicatorRender={this.topIndicatorRender}
    topIndicatorHeight={60}
    isRefreshing={this.state.isRefreshing}
    
    {...and some FlatList Props}
  />
  1. 完整示例代码:example

更多配置项

PullList 下拉效果属性

  • style: 设置组件样式,比如可以设置width/height/backgroudColor等
  • onPulling: 处于pulling状态时执行的方法
  • onPullOk: 处于onPullOk状态时执行的方法
  • onPullRelease: 处于pullrelease状态时执行的方法
  • topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受4个参数: ispulling, ispullok, ispullreleasegesturePosition,你可以使用gesturePosition定义动画头部.
  • topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性
  • isPullEnd: 是否已经下拉结束,若为true则隐藏顶部刷新指示组件,非必须
  • isRefreshing: 标示下拉刷新状态的属性,同react-native官网FlatList中的属性refreshing作用类似。为true显示头部刷新指示器,为false则隐藏头部刷新指示器

PullList 上拉加载更多,可直接使用官网FlatList的属性onEndReachedonEndReachedThreshold进行实现,详情请见Example

完整demo代码示例:

import React, { Component } from 'react';
import {
Text,
View,
ActivityIndicator,
} from 'react-native';

import {PullList} from 'react-native-flatlist-pull';

export default class extends Component {

   constructor(props) {
     super(props);
     this.state = {
       data: [0],
       isRefreshing:false,
       isLoadMore:false
     };
     this.loadMore = this.loadMore.bind(this);
     this.topIndicatorRender = this.topIndicatorRender.bind(this);
     this.onPullRelease=this.onPullRelease.bind(this);
   }
  
   componentDidMount() {
     this.requestData(10);
   }
  
   //自定义下拉刷新指示器
   topIndicatorRender(pulling, pullok, pullrelease) {
     const hide = {position: 'absolute', left: 10000};
     const show = {position: 'relative', left: 0};
     setTimeout(() => {
       if (pulling) {
         this.txtPulling && this.txtPulling.setNativeProps({style: show});
         this.txtPullok && this.txtPullok.setNativeProps({style: hide});
         this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
       } else if (pullok) {
         this.txtPulling && this.txtPulling.setNativeProps({style: hide});
         this.txtPullok && this.txtPullok.setNativeProps({style: show});
         this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
       } else if (pullrelease) {
         this.txtPulling && this.txtPulling.setNativeProps({style: hide});
         this.txtPullok && this.txtPullok.setNativeProps({style: hide});
         this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show});
       }
     }, 1);
     return (
       <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60,zIndex:1}}>
         <ActivityIndicator size="small" color="red" />
         <View ref={(c) => {this.txtPulling = c;}}>
           <Text>继续下拉刷新...</Text>
         </View>
         <View ref={(c) => {this.txtPullok = c;}}>
           <Text>松开刷新......</Text>
         </View>
         <View ref={(c) => {this.txtPullrelease = c;}}>
           <Text>刷新中......</Text>
         </View>
       </View>
     );
   }
  
   render() {
     return (
       <PullList
         //FlatList基本属性
         data={this.state.data}
         renderItem={({item,index})=>this.renderItem(item,index)}
         keyExtractor={(item, index) => item.toString()}
  
         //FlatList上拉加载更多
         ListFooterComponent={()=>this.ListFooterComponent()}
         onEndReached={()=>this.loadMore()}
         onEndReachedThreshold={0.1}
  
         //PullList下拉刷新
         onPullRelease={this.onPullRelease}
         topIndicatorRender={this.topIndicatorRender}
         topIndicatorHeight={60}
         //控制下拉刷新状态的属性,为true时显示头部刷新组件,为false则隐藏
         isRefreshing={this.state.isRefreshing}
       />
     );
   }
  
   onPullRelease(resolve) {
     this.setState({isRefreshing:true});
     //do something
     setTimeout(() => {
       //真实情况下,应在请求网络数据后的回调中修改isRefreshing
       this.setState({isRefreshing:false})
     }, 2000);
   }
  
   renderItem(item,index) {
     return (
       <View style={{height: 100, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
         <Text style={{fontSize:30}}>{item}</Text>
       </View>
     );
   }
  
   ListFooterComponent=()=>{
     const {isLoadMore}=this.state;
     if(isLoadMore) {
       return (
         <View style={{ height: px2dp(80), alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}>
           <ActivityIndicator size="small" color="red"/>
           <Text style={{ fontSize: 25, marginLeft: 5 }}>{'正在加载中……'}</Text>
         </View>
       )
     }else return <View/>
   };
  
   loadMore=()=>{
     if(!this.state.isLoadMore) {
       this.setState({ isLoadMore: true });
       //do something
       //真实情况下,应在请求网络数据后的回调中修改isLoadMore
       setTimeout(() => {
         this.requestData(3);
         this.setState({ isLoadMore: false })
       }, 3000);
     }
   };
  
   requestData=(dataLength)=>{
     let currentLength=this.state.data.length;
     for(let i=currentLength;i<currentLength+dataLength;i++) {
       this.state.data.push(i)
     }
   }
}
2018-10-22 18:06:12 kdsde 阅读数 3222
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

1、如果是使用goback返回刷新,也就是返回上一级页面后刷新页面,这时可以使用回调方法。

例如:从A跳到B再回到A,

A页面定义回调方法,

this.props.navigation.navigate("B", {
    id: this.state.id,
    refresh: function () {
        this.init();
    }
});
B页面返回时调用,

<TouchableOpacity  onPress={() => {
    this.props.navigation.state.params.refresh();
    this.props.navigation.goBack();
}}>
    <Text>返回</Text>
</TouchableOpacity>
2,从多个页面返回刷新

import {DeviceEventEmitter} from 'react-native';

//...

import  {DeviceEventEmitter} from 'react-native';
//...
componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('Key', this.refreshData)
    };
    refreshData(data) {
        this.setState({
            data: data,
        });
    };
    componentWillUnmount() {
        this.subscription.remove();
    };
注:refreshData方法中的this可能找不到,需要从新设置一个_this来代替。
or 

//组件加载
componentDidMount() {
    this.subscription = DeviceEventEmitter.addListener('Key', data =>{
        if (data){
            this.queryData(true);
            //佣金信息查询
            this.props._queryUserReward();
        }
    });
   
}
//组件卸载
componentWillUnmount() {
    this.subscription.remove();
}

在需要发送的界面:

DeviceEventEmitter.emit('KeyBack', 'true');