react-native reload 不能刷新是什么原因_百度知道React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解
今天我们一起来看一下PullToRefreshView下拉刷新讲解以及使用实例
刚创建的React Native技术交流群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
该PullToRefreshViewAndroid视图是封装了Android平台的下拉刷新组件(SwipeRefreshLayout)，该组件支持设置单一的可以滚动的子视图(例如:ScrollView)。当内部的子视图的垂直方向的偏移量scrollY:0的时候，手指往下拖拽该视图的时候回触发onRefresh事件方法。
[注意].该组件风格需要设置成{flex:1}。当我们滚动的子视图为ScrollView或者ListView的时候。
(二)属性方法
1.继承可以使用View组件的所有Style(具体查看:http://facebook.github.io/react-native/docs/view.html)
2.colors[ColorPropType] 设置下拉刷新加载进度指示器的颜色，可以设置多多种颜色(最多设置四种)
3.enabled bool 设置是否启动下拉刷新的功能
4.progressBackgroundColorColorPropType 设置设置下拉刷新加载进去指示器的背景颜色
5.refreshing bool 设置当前进去指示器是否在活跃状态，也表明当前是不是在下拉刷新状态
6.sizeRefreshLayoutConsts.SIZE.DEFAULT下拉刷新指示器的尺寸大小，详细请查看PullToRefreshViewAndroid.SIZE值()
(三)使用实例
上面已经基本介绍了PullToRefreshAndroidView的的基本介绍和相关属性介绍，下面我们来用一个实例来具体演示一下该组件的具体使用。
该实例从官方实例中进行修改而来，具体代码如下:
'use strict';
const React =require('react-native');
AppRegistry,
ScrollView,
StyleSheet,
PullToRefreshViewAndroid,
const styles =StyleSheet.create({
borderColor: 'red',
borderWidth: 2,
padding: 20,
backgroundColor: '#3ad734',
margin: 5,
alignSelf: 'center',
color: '#fff',
scrollview: {
const Row =React.createClass({
render: function() {
{this.props.data.text }
constPullToRefreshDemo = React.createClass({
getInitialState() {
isRefreshing: false,
loaded: 0,
rowData: Array.from(new Array(20)).map(
(val, i) =& ({text:'初始行' + i})
render() {
const rows = this.state.rowData.map((row,ii) =& {
_onRefresh() {
this.setState({isRefreshing: true});
setTimeout(() =& {
// 进行准备5项新数据
const rowData = Array.from(new Array(5))
.map((val, i) =& ({
text: '下拉刷新行' + (+this.state.loaded + i)
.concat(this.state.rowData);
this.setState({
loaded: this.state.loaded + 5,
isRefreshing: false,
rowData: rowData,
AppRegistry.registerComponent('PullToRefreshDemo',() =& PullToRefreshDemo);
具体运行效果如下:
(四)最后总结
今天我们主要学习一下PullToRefreshAndroidView组件的基本介绍和实例演示使用。大家有问题可以加一下群React Native技术交流群()或者底下进行回复一下。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'2609人阅读
【React Native 跨平台应用开发】（13）
本站文章均为&&原创,转载务必在明显处注明：&转载自【黑米GameDev街区】 原文链接:&开发过游戏的都应该很清楚，“刷屏”是多么的重要。其实开发应用也如此，当组件的数据被修改后，如何及时更新组件呈现出最新的数据与效果一样至关重要。那么这里Himi大概讲三种常用的方式：this.setState() &【最为常用】这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。一般情况下setState() 总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。举例、代码段如下：1234567891011121314151617181920212223242526constructor(props) { super(props); this.state = {&&&&&&&&&&&&&&&&myName:'I am MyName!', };&}&testFun(){&&&&this.setState({myName:'组件被刷新了'});}&&render() {&&&&&&&&......&&&&&&&&&TouchableHighlight &&&&&&&&&&underlayColor='#4169e1'&&&&&&&&&&onPress={this.testFun.bind(this)}&&&&&&&&&&&&& &&&&&&&&&&&&&Image &&&&&&&&&&&&source={require('./res/himi.png')} &&&&&&&&&&&&style={{width: 70, height: 70}} &&&&&&&&&&&&/&&&&&&&&&&/TouchableHighlight&&&&&&&&&......&&)}1. 在this.state中添加了一个 字符串变量 myName 用于Text 组件的文字显示2. 自定义了一个 testFun 函数，用于 Touchable的回调处理，其中调用了this.setState 函数并修改了myName的数据3. 在render中添加了一个高亮触摸组件，用于演示效果。【注】假如有 a、b、c三个组件，b&是 a&的子组件，c是 b&的子组件，那么 b&中 setState 之后，b&和 c&会 rerender，而 a&不会。&因此建议大家可以把每个组件提供一个重绘接口，然后提供给其他组件调用。效果如下：（点击查看动态效果）&2. &this.forceUpdate() 【较为常用，但是不推荐】如果 render() 方法从 this.props 或者 this.state 之外的地方读取数据，你需要通过调用 forceUpdate() 告诉 React 什么时候需要再次运行 render()。如果直接改变了 this.state，也需要调用 forceUpdate()。调用 forceUpdate() 将会导致 render() 方法在相应的组件上被调用，并且子级组件也会调用自己的 render()，但是如果标记改变了，那么 React 仅会更新 DOM。通常情况下，应该尽量避免所有使用 forceUpdate() 的情况，在 render() 中仅从 this.props 和 this.state 中读取数据。这会使应用大大简化，并且更加高效。举例、在上面的示例代码基础上修改，如下：123456789101112131415161718192021222324252627282930&&testFun(){&&&&this.state.myName='组件被刷新了';&&}&&testForceFun(){&&&&this.forceUpdate();&&}&render() {&&&&&&&& ......&&&&&&&& &TouchableHighlight &&&&&&&&&&underlayColor='#4169e1'&&&&&&&&&&onPress={this.testFun.bind(this)}&&&&&&&&&&&&& &&&&&&&&&&&&&Image &&&&&&&&&&&&source={require('./res/himi.png')} &&&&&&&&&&&&style={{width: 70, height: 70}} &&&&&&&&&&&&/&&&&&&&&&&/TouchableHighlight&&&&&&&&&&&&&&&&&&TouchableHighlight &&&&&&&&&&underlayColor='#4169e1'&&&&&&&&&&onPress={this.testForceFun.bind(this)}&&&&&&&&&&&&& &&&&&&&&&&&&&Image &&&&&&&&&&&&source={require('./res/himi.png')} &&&&&&&&&&&&style={{width: 40, height: 40}} &&&&&&&&&&&&/&&&&&&&&&&/TouchableHighlight&&&&&&& ......｝改动说明：a) &修改&testFun 函数，让其作用只是修改了&myName 的值，并没有setState！所以不重绘b) &添加&testForceFun 函数，作用是调用强制重绘函数。c) render中多加了一个按钮，来触发&testForceFun函数。运行效果图如下：（注意 &testForceFun 函数对应的是图片较小的那个哦～&）&通过示意图可以知道，Himi 调用了&testFun、接着调用testForceFun ，才能看到刷新。&& & & & &3. this.setProps() & 【不常用】同一个节点上再次调用&React.render()&来更新根组件是首选的方式，也可以调用&setProps()&来改变组件的属性，触发一次重新渲染。但是！此方法仅在根组件上面调用。也就是说，仅在直接传给 React.render() 的组件上可用，在它的子级组件上不可用。如果你倾向于在子组件上使用 setProps()，不要利用响应式更新，而是当子组件在 render() 中创建的时候传入新的 prop 到子组件中。说的通俗一点：父组件不能直接修改 prop属性，只能父类在使用传入的时候进行设置。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2489950次
积分：22337
积分：22337
排名：第224名
原创：169篇
评论：2911条
移动开发专家,专注于移动开发领域,多年 J2me、Android、iOS 平台游戏开发经验;
CSDN、ITeye、51CTO、eoe-Android、泰然、中国移动开发者社区、微度网等多家技术论坛担任专家与版主；
? 【Unreal Engine 】
? 【React Native】
? 【Cocos Creator】
? 【Cocos2dx】
? 【C2dx-Lua】
文章：57篇
阅读：1147569
文章：31篇
阅读：717641& 浏览文章
react-native里TextInput遇到的一些问题及解决方案
来源：网络编辑：佚名
时间：人气：
最近在用react-native做页面，遇到了一些问题，下面就根据这些问题来总结一下。
1、多个tab按钮的默认以及选中状态样式功能切换
因为在react-native里我们无法利用css的active来设置，所以就需要想其他的方法来处理这个问题。
我想到的方法：给每一个按钮设置一个index,然后根据当前的index来判断哪个按钮处于选中状态，以及在选中状态下要做的操作。
例子演示：https://rnplay.org/apps/fgncag
2、TextInput获得焦点时，模拟器不出现键盘
原因在于：需要勾选 Hardware -& Keyboard -& Toggle Software keyboard
3、TextInput失去焦点时，键盘不消失
需要给当前的TextInput设置一个ref属性，以及onFocus方法来实现。
例子演示：https://rnplay.org/apps/NNnuMA
4、键盘弹起遮挡住后面的内容
直接看解决代码吧：https://rnplay.org/apps/y0oAuQ
“react-native里TextInput遇到的一些问题及解决方案”的相关内容有:
作为Zabbix骨灰级粉丝，一直以来对第三方监控（APM）都是拒绝的。一来觉得收费，二来担心数据被人所知，三来觉得Zabbix牛逼到无可取代。但是，随着APM市场的火爆，我决定「放下身段」试用一次，并且会总结出它与开源监控之间差别在哪里。
不知不觉微软Azure已经进入中国市场近两年的时间。那么Azure平台的性能究竟如何？资源加载的延迟、虚拟机的稳定性等问题是否切实满足客户期许。这些都是大家对微软Azure这个国外的云服务使者非常关注的问题。
【编者按】OneAPM运营团队，近日在上发现了一篇文章，特别奉献给大家。本文作者王宇先生从2015年年初就开始使用我们的产品，也是OneAPM的忠实用户。
热门文章排行
<a href="/program/programnews/news/264742.htm" target="_blank" title="
来自：浏览 1003update局部刷新问题
[问题点数：40分]
update局部刷新问题
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。