2019-01-01 22:56:30 qq_40962320 阅读数 779
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

完成拉下拉刷新的功能后,老板要求下拉刷新要能自定义。于是到网上找了找,发现了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)
     }
   }
}
2017-11-05 18:36:27 TianciZhu 阅读数 325
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

如题:

       主要是通过RN中的组件来轻松实现这个功能:DeviceEventEmitter 


1. 接收消息的界面

//注册这个监听事件  
componentDidMount(){  
     DeviceEventEmitter.addListener('xxxName’, Function);  
};

xxxName为自定义,Function为参数,也可以是字符串.

DeviceEventEmitter.addListener('xxxName’, "发送的消息");


//在组件销毁的时候要将其移除  
componentWillUnmount(){  
    DeviceEventEmitter.remove();  
};


2. 发送消息界面

 import  {  
 DeviceEventEmitter  
 } from 'react-native';  
   
 //调用事件通知  param是指传递的相应参数  
 DeviceEventEmitter.emit('xxxName’,param); 






2019-08-02 10:22:00 qq_34273059 阅读数 79
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

页面a向页面b跳转,页面b在转会页面a,页面a需要刷新时。需要页面a向页面b传递一个回调函数,通过这个回调函数能够对页面a进行转化
A页面

onPress={() => {

	this.props.navigation.navigate('页面b', {

	// info: info,参数

	callback: (() => { //回调函数

		this.setState({// something: info})

	})
})}}

B页面

onPress={() => {

this.props.navigation.navigate('页面a')

if (this.props.navigation.state.params.callback) {

this.props.navigation.state.params.callback()

}

}}
2018-02-03 16:04:26 LJFPHP 阅读数 1266
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

一、背景

      我这边本来是用FastList自带的刷新机制来进行刷新的。但是由于我页面里面的FastList组件太多,刷新方面变得混乱起来。后来又看RN的文档才发现,原来RefreshControl这个刷新组件也可以在ScrollView里面使用。相当于整体页面的刷新,很不错。

二、使用方法

1、在RN的顶部引入RefreshControl,组件

2、属性

    onRefresh   function    当视图开始刷新的时候调用
    refreshing  bool    决定加载进去指示器是否为活跃状态,也表名当前是否在刷新中

android平台特有:

colors  ColorPropType   指定至少一种颜色用来绘制刷新指示器。
enabled bool    指定是否要开启刷新指示器。
progressBackgroundColor ColorPropType   指定刷新指示器的背景色。
size    RefreshLayoutConsts.SIZE.DEFAULT    指定刷新指示器的大小,具体数值可参阅RefreshControl.SIZE.
progressViewOffset  React.PropTypes.number  指定刷新指示器的垂直起始位置(top offset)。

ios平台特有:

tintColor   ColorPropType   指定刷新指示器的颜色。
iostitle    string  指定刷新指示器下显示的文字。

3、找到你的scrollView组件

<ScrollView  style={{height:gScreen.height-40,}}
                       refreshControl={  //设置下拉刷新组件
                         <RefreshControl
                           refreshing={this.state.isRefreshing}  
                           onRefresh={this.onRefresh.bind(this)}  //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                           tintColor='white'
                           title= {this.state.isRefreshing? '刷新中....':'下拉刷新'}
                         />
                       }
          >

解释:

1)this.state.isRefreshing 指的是在初始化的时候,我们需要指定这个值为false,代表不刷新,当下拉的时候,把这个值改成true,代表可以开始刷新了。
2)this.onRefresh.bind(this) 这个代表绑定的方法。也就是开始刷新之后,执行我们自己的逻辑部分方法。
3)如果需要定义一些特殊的属性,请参照上面的属性表来自定义

4、我们自己的处理方法

 onRefresh() {
 //先修改刷新状态为true
    this.setState({isRefreshing: true});
    console.log("开始新的刷新方法");
    setTimeout(() => {
       //你的刷新逻辑
       //逻辑执行完之后,修改刷新状态为false
      this.setState({isRefreshing: false});
    }, 2000);
  }

end

2017-05-04 15:16:59 cangsangxi 阅读数 284
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁
1.
<ScrollView
   refreshControl={
           <RefreshControl
              refreshing={this.state.isRefreshing}
              onRefresh={this._onRefresh.bind(this)}
              tintColor="#ff0000"
              title="加载中..."
              titleColor="#00ff00"
              colors={['#ff0000', '#00ff00', '#0000ff']}
              progressBackgroundColor="#ffffff"
            />
      }
      onScroll={this._onScroll.bind(this)}
      scrollEventThrottle={50}

>

2.

//      下拉刷新
    _onRefresh(){
        this.setState({isRefreshing: true});
        setTimeout(() => {
              this.setState({
                isRefreshing: false,
              });
            }, 2000);
      }

没有更多推荐了,返回首页