• 我们先看一下今天要实现的效果:我们下拉的时候显示“下拉刷新状态“,当滑动到底部的时候自动显示“加载更多“。思路: 1、下拉刷新我们直接使用rn自带的RefreshControl。 2、当我们滑动到scrollview或者listview...

    我们直接进入我们今天的主题了.我们先看一下今天要实现的效果:

    这里写图片描述

    我们下拉的时候显示“下拉刷新状态“,当滑动到底部的时候自动显示“加载更多“。

    思路:
    1、下拉刷新我们直接使用rn自带的RefreshControl。
    2、当我们滑动到scrollview或者listview的最底部的时候,开始显示进度条,然后加载更多。

    好啦~~我们今天主要要解决的就是怎么判断scrollview或者listview滑动到最底部:

    1、scrollview滑动到最顶部

    搞过android的小伙伴都知道,在我们原生scrollview中,当我们的scrollview的scrollY为0的时候,即到达顶部位置,那么rn中也是一样的。

    2、scrollview滑动到滑动到底部

    当scrollview的高度+scrollY>=contentHeight的时候,就证明已经滑动到底部了。

    好了,有了思路我们就开动了,在scrollview 中我们可以监听scroll的变化:

    <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}
                    >

    注意ios中一定要给scrollEventThrottle这个属性一个值,不然onScroll调用的频率会很少,影响我们的效果。

    然后我们看看_onScroll方法中怎么写呢?

    /**
         * scrollview滑动的时候
         * @private
         */
        _onScroll(event) {
            if(this.state.loadMore){
                return;
            }
            let y = event.nativeEvent.contentOffset.y;
            let height = event.nativeEvent.layoutMeasurement.height;
            let contentHeight = event.nativeEvent.contentSize.height;
            console.log('offsetY-->' + y);
            console.log('height-->' + height);
            console.log('contentHeight-->' + contentHeight);
            if(y+height>=contentHeight-20){
                this.setState({
                    loadMore:true
                });
            }
        }

    是不是soeay呢??当y+height>=contentHeight-20,这个20为我设置的一个偏移量(童鞋们可以按需求设置)。然后修改我们的state就ok了。

      render() {
            let self = this;
            return (
                <View style={styles.container}>
                    {/*顶部导航栏*/}
                    {self._renderNavigator()}
                    <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}
                    >
                        {/*顶部菜单导航*/}
                        {self._renderTopMenus()}
                        {/*推荐商家menu1*/}
                        {self._recommendMerchant()}
                        {/*推荐商家menu1*/}
                        {self._recommendMerchant()}
                        {/*推荐商家menu1*/}
                        {self._recommendMerchant()}
                        {/*推荐商家menu1*/}
                        {self._recommendMerchant()}
                        {/*推荐商家menu1*/}
                        {self._recommendMerchant()}
                        {/*推荐商家menu1*/}
                        {self._recommendMerchant()}
                        {/*尾部上拉加载更多view*/}
                        {self._renderLoadMore()}
                    </ScrollView>
                </View>
            );
        }
     /**
         * 显示上啦加载view
         * @private
         */
        _renderLoadMore() {
            if (this.state.baseDatas == null || this.state.baseDatas.recommondMerchant == null) {
                return;
            }
            return (
                <LoadingMore
                    isLoading={this.state.loadMore}
                    onLoading={()=>{
                        alert('fdfdfd');
                    }}
                />
            );
        }

    LoadingMore.js:

    /**
     * @author YASIN
     * @version [React Native PABank V01,17/3/13]
     * @date 17/3/13
     * @description LoadingMore
     */
    import React,{Component,PropTypes}from 'react';
    import {
        View,
        ActivityIndicator,
        Text,
        TouchableOpacity
    }from 'react-native';
    import * as ScreenUtils from '../../Util/ScreenUtil';
    import {AppBaseColor,AppBaseDimension}from '../../Constant/AppBase';
    export default class LoadingMore extends Component {
        static propTypes = {
            isLoading: PropTypes.bool
        }
        static defaultProps = {
            isLoading: false
        }
        // 构造
        constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                isLoading: props.isLoading
            };
        }
    
        render() {
            if (this.state.isLoading) {
                return (
                    <View
                        style={{flexDirection:'row',alignSelf:'center',alignItems:'center',padding:ScreenUtils.scaleSize(10) }}>
                        <ActivityIndicator
                            size={'small'}
                            color={AppBaseColor.MAIN_COLOR}
                            animating={true}
                            style={{width:ScreenUtils.scaleSize(15),height:ScreenUtils.scaleSize(15)}}
                        />
                        <Text style={{
                            color:AppBaseColor.DESC_COLOR,
                            fontSize:AppBaseDimension.FontSize.DESC,
                            marginLeft:ScreenUtils.scaleSize(15)
                        }}>
                            正在加载...
                        </Text>
                    </View>
                );
            } else if(this.props.onLoading){
                return (
                    <TouchableOpacity
                        onPress={()=>{
                            this.setState({
                                isLoading:true
                            });
                            this.props.onLoading&&this.props.onLoading()
                        }}
                    >
                        <Text style={{
                            color:AppBaseColor.DESC_COLOR,
                            fontSize:AppBaseDimension.FontSize.DESC,
                            alignSelf:'center',
                            padding:ScreenUtils.scaleSize(10)
                        }}>
                            点击加载更多...
                        </Text>
                    </TouchableOpacity>
                );
            }
        }
    
        componentWillReceiveProps(nextProps) {
            this.setState({
                isLoading: nextProps.isLoading
            });
        }
    }

    ScreenUtil.js:

    /**
     * @author YASIN
     * @version [Android YASIN V01, ]
     * @blog http://blog.csdn.net/vv_bug
     * @description
     * 屏幕工具类
     * ui设计基准,iphone 6
     * width:750
     * height:1334
     */
    import {
        PixelRatio,
    }from 'react-native';
    import Dimensions from 'Dimensions';
    export var screenW = Dimensions.get('window').width;
    export var screenH = Dimensions.get('window').height;
    var fontScale = PixelRatio.getFontScale();
    export var pixelRatio =PixelRatio.get();
    
    export const DEFAULT_DENSITY=2;
    const w2 = 750/DEFAULT_DENSITY;
    const h2 = 1334/DEFAULT_DENSITY;
    
    export function setSpText(size:Number) {
        var scaleWidth = screenW / w2;
        var scaleHeight = screenH / h2;
        var scale = Math.min(scaleWidth, scaleHeight);
        size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
        return size;
    }
    /**
     * 屏幕适配,缩放size
     * @param size
     * @returns {Number}
     * @constructor
     */
    export function scaleSize(size:Number) {
        var scaleWidth = screenW / w2;
        var scaleHeight = screenH / h2;
        var scale = Math.min(scaleWidth, scaleHeight);
        size = Math.round((size * scale + 0.5));
        return size/DEFAULT_DENSITY;
    }

    好啦~~! 就到这里了哦~~~

    展开全文
  • React-Native 上拉刷新下拉加载,点击跳转详情代码解析 导入这行依赖 // An highlighted block ...react-native-refresh-list-view&quot;; 设置状态机 constructor(props) { super(props); this...

    React-Native 上拉刷新下拉加载,点击跳转详情代码解析

    配置路由器

    import { createTabNavigator, createStackNavigator } from "react-navigation";
    import New1 from "./New1";
    import New2 from "./New2";
    import Web from "../Web";
    const Route2 = createTabNavigator({
      New1: {
        screen: New1,
        navigationOptions: {
          title: "头条"
        }
      },
      New2: {
        screen: New2,
        navigationOptions: {
          title: "娱乐"
        }
      }
    });
    const Route1 = createStackNavigator({
      Route2: {
        screen: Route2,
        navigationOptions: {
          header: null
        }
      },
      Web: Web
    });
    export default Route1;
    
    

    导入这行依赖

    // An highlighted block
    import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
    

    设置状态机

      constructor(props) {
        super(props);
        this.state = {
          page: 1,
          dataValue: [],
          refreshstate: RefreshState.Idle
        };
      }
    

    进入页面则加载数据

    componentDidMount() {
        this.HeaderRefresh();
      }
    
      constructor(props) {
        super(props);
        this.state = {
          page: 1,
          dataValue: [],
          refreshstate: RefreshState.Idle
        };
      }
    

    上拉刷新

       HeaderRefresh = () => {
        this.setState({
          page: 1,
          refreshstate: RefreshState.HeaderRefreshing
        });
        fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=share&limit=10`)
          .then(response => response.json())
          .then(responseJson => {
            this.setState({
              dataValue: responseJson.data,
              refreshstate: RefreshState.Idle,
              page: this.state.page + 1
            });
          })
          .catch(error => {
            this.setState({
              refreshstate: RefreshState.Failure
            });
          });
      };
    

    下拉加载

       FooterRefresh = () => {
        this.setState({
          refreshstate: RefreshState.FooterRefreshing
        });
        fetch(
          `https://cnodejs.org/api/v1/topics?page=${
            this.state.page
          }&tab=share&limit=10`
        )
          .then(response => response.json())
          .then(responseJson => {
            this.setState({
              dataValue: [...this.state.dataValue, ...responseJson.data],
              refreshstate: RefreshState.Idle,
              page: this.state.page + 1
            });
          })
          .catch(error => {
            this.setState({
              refreshstate: RefreshState.Failure
            });
          });
      };
    

    下面View调用

     <RefreshListView
              style={{ flex: 1 }}
              data={this.state.dataValue}
              renderItem={({ item }) => (
                <TouchableHighlight
                  onPress={() => {
                    this.props.navigation.navigate("Web", {
                      content: item.content
                    });
                  }}
                >
                  <View style={{ width: "100%" }}>
                    <View style={{ flexDirection: "row", marginBottom: 10 }}>
                      <Image
                        style={{ width: 60, height: 60, borderRadius: 65 }}
                        source={{ uri: item.author.avatar_url }}
                      />
                      <View style={{ marginLeft: 10 }}>
                        <Text>{item.title}</Text>
                        <Text style={{ marginTop: 20 }}>
                          {item.author.loginname}
                        </Text>
                      </View>
                    </View>
                    <View
                      style={{
                        width: "100%",
                        height: 2,
                        backgroundColor: "#f6f6f6",
                        marginBottom: 10
                      }}
                    />
                  </View>
                </TouchableHighlight>
              )}
              refreshState={this.state.refreshstate}
              onFooterRefresh={this.FooterRefresh}
              onHeaderRefresh={this.HeaderRefresh}
            />
    
    展开全文
  • react-native 第三方库

    2020-06-21 15:01:25
    react-native 第三方库 React-Native-Elements 一组开发RN的UI工具包(强烈推荐) ???????????????????? react-native-calendars ???????????????? 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用...

    react-native 第三方库

    React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥

    react-native-calendars 🔥🔥🔥🔥 优秀的日历控件

    apsl-react-native-button 定义了一个Button支持用Style来配置 🔥🔥

    react-native-action-button 支持多种点击事件的Button控件 🔥🔥

    react-native-button 另一个Button组件 🔥🔥

    ex-navigator 封装Navigator,以Route为中心的Navigator 🔥🔥

    gl-react-native React Native中使用OPENGL来实现复杂的图片和components渲染 🔥🔥🔥

    react-native-activity-view iOS上的分享和action sheets组件 🔥🔥

    react-native-app-intro 引导页 🔥🔥

    react-native-blur 添加模糊或者毛玻璃效果 🔥🔥🔥

    react-native-calendar 日历 🔥

    react-native-chart 绘图(折线图,柱状图,扇形图) 🔥🔥🔥

    react-native-circular-progress 圆形的显示进度的视图 🔥

    react-native-collapsible 可折叠的component 🔥

    React Native Drawer 抽屉效果,可 用来实现侧拉菜单 🔥🔥🔥

    react-native-dropdown下拉菜单 🔥

    ReactNativeEffectsView 封装了iOS 8上的UIVisualEffectViews,在React Native中实现毛玻璃效果 🔥

    react-native-gesture-password 手势解锁,支持iOS和Android 🔥

    react-native-gifted-form 在React Native中方便的使用表格 🔥🔥

    react-native-gifted-listview 下拉刷新和上拉加载的ListView 🔥🔥

    react-native-gifted-messenger 方便的实现聊天UI 🔥🔥🔥🔥

    react-native-grid-view 网格视图,类似iOS中的UICollectionView 🔥

    react-native-image-picker 用Native UI来选择图片或者拍照 🔥🔥🔥

    react-native-keyboard-spacer 适用于iOS的根据键盘自动调整输入框 🔥🔥

    react-native-keyboardevents 监听键盘显示/隐藏 🔥

    react-native-lightbox 图片全屏预览 🔥🔥🔥

    react-native-looped-carousel 视图轮播 🔥🔥

    react-native-mapbox-gl 地图 🔥🔥

    react-native-maps 地图 🔥🔥🔥🔥

    react-native-material-design material design 🔥🔥🔥

    react-native-material-kit 一组UI Components,为了介绍 Material Design 🔥🔥🔥🔥

    react-native-modalbox 用于模态显示的Component 🔥🔥

    react-native-orientation 监听设备旋转 🔥

    react-native-parallax parallax效果 🔥

    react-native-parallax-scroll-view 视差滚动效果的ScrollView,支持固定header

    react-native-picker 选择器,可用于实现时间选择,区域选择 🔥

    react-native-popover 弹出气泡框的Component 🔥

    react-native-progress-hud ProgressHUD 🔥

    react-native-refresher 支持下拉刷新的listview 🔥🔥

    react-native-router类似Navigator的导航控制器 🔥🔥🔥🔥

    react-native-scrollable-tab-view 支持左右滚动的来切换tab的tableview 🔥🔥🔥🔥

    react-native-controllers 封装了 原生的iOS 导航栏,tabbar,抽屉效果等。 🔥🔥

    react-native-search-bar 封装iOS原生UISearchBar 🔥🔥

    react-native-spinkit 一组Activity指示器 🔥🔥

    react-native-splashscreen App载入视图,启动后自动隐藏 🔥

    react-native-svgkit 显示SVG格式图片 🔥🔥

    react-native-swipeout 类似TableViewCell的左滑删除,支持Component滑动 🔥🔥🔥

    react-native-swiper 视图轮播,上下/左右滑动组件,类似UICollectionView 🔥🔥🔥🔥

    react-native-tableview 封装iOS原生UITableview

    react-native-vector-icons 3000+支持自定义的图标 🔥🔥🔥🔥

    react-native-sglistview 为了解决React Native中ListView的内存问题 🔥

    react-native-invertible-scroll-view 逆向的ScrollView,从底部开始布局,适用于聊天等向上滑动来加载更多的情况 🔥

    react-native-viewpager 视图轮播,支持循环滚动,自定义视图。已做性能优化 🔥🔥🔥

    react-native-tab-navigator TabBar切换视图 🔥🔥

    react-native-loading-spinner-overlay 加载中的提示spinner 🔥,支持iOS/Android

    react-native-color-picker iOS/Android通用的颜色选择器

    react-native-pathjs-charts - 基于react-native-svg 和 paths-js写的iOS,Android通用的绘图库 🔥

    react-native-gl-model-view - 显示/动画 Wavefront,.OBJ等3D对象(iOS)

    [react-native-message-bar]((https://github.com/KBLNY/react-native-message-bar) 在屏幕底部/顶部展示通知

    react-native-fast-image 高性能的图片组件

    react-native-search-box 纯JS写的类似iOS SearchBar的组件

    react-native-splash-screen A splash screen for react-native, hide when application loaded ,it works on iOS and Android. 🔥🔥🔥🔥

    rn-placeholder 🔥 空数据的站位符,很适合用来做列表站位

    react-native-css 用CSS的方式对Component进行Style 🔥🔥

    react-native-extended-stylesheet 对stylesheet进行扩展 🔥🔥

    react-native-icons 图标

    react-native-scrollable-tab-view 可滚动标签

    react-native-side-menu 侧栏

    react-native-check-box CheckBox

    react-native-easy-toast 一款简单易用的 Toast 组件,支持 Android&iOS.

    material组件库(各种漂亮的小组件)https://github.com/xinthink/react-native-material-kit

    base组件库(各种封装不错的小组件)http://nativebase.io/docs/v0.4.6/components#anatomy
    https://github.com/GeekyAnts/NativeBase

    不错的按钮
    https://github.com/mastermoo/react-native-action-button
    https://github.com/ide/react-native-button

    炫酷效果的 TextInput
    https://github.com/halilb/react-native-textinput-effects
    https://github.com/zbtang/React-Native-TextInputLayout

    抽屉效果
    https://github.com/root-two/react-native-drawer
    https://github.com/react-native-fellowship/react-native-side-menu

    侧滑按钮
    https://github.com/dancormier/react-native-swipeout
    https://github.com/jemise111/react-native-swipe-list-view

    图表
    https://github.com/tomauty/react-native-chart

    下拉放大
    https://github.com/lelandrichardson/react-native-parallax-view

    可滑动的日历组件
    https://github.com/cqm1994617/react-native-myCalendar

    选择按钮
    https://github.com/sconxu/react-native-checkbox

    提示消息的Bar
    https://github.com/KBLNY/react-native-message-bar

    照片墙
    https://github.com/ldn0x7dc/react-native-gallery

    星星
    https://github.com/djchie/react-native-star-rating

    Text跑马灯效果
    https://github.com/remobile/react-native-marquee-label

    图片加载进度条
    https://github.com/oblador/react-native-image-progress
    轮播视图
    https://github.com/race604/react-native-viewpager
    https://github.com/FuYaoDe/react-native-app-intro
    https://github.com/appintheair/react-native-looped-carousel
    https://github.com/leecade/react-native-swiper
    毛玻璃效果
    https://github.com/react-native-fellowship/react-native-blur

    滑动可以收回头部动画的列表
    react-native-parallax-scroll-view

    下拉选择
    https://github.com/alinz/react-native-dropdown

    图片查看
    https://github.com/oblador/react-native-lightbox
    照片选择
    https://github.com/marcshilling/react-native-image-picker
    https://github.com/ivpusic/react-native-image-crop-picker
    模态视图
    https://github.com/maxs15/react-native-modalbox
    https://github.com/brentvatne/react-native-modal
    https://github.com/bodyflex/react-native-simple-modal

    按钮特效 react-native-circle-button▼
    项目名称:react-native-circle-button功能介绍:可以支持双平台的原型菜单按钮,作者灵感来源于国外设计网站dribbble,虽然可能项目用到的可能性比较小,但是可以看下实现过程。仓库地址:https://github.com/dwicao/react-native-circle-button

    酷炫折叠动画 react-native-foldview▼
    项目名称:react-native-foldview功能介绍:纯 JS 代码编写的,一个带折叠动画的列表项 UI 组件,可用在滚动列表中,展示列表详情之类的,动画效果也不错。仓库地址:https://github.com/jmurzy/react-native-foldview

    这个是一个下拉选项组件
    A react-native dropdown/picker/selector component for both Android & iOS.

    国人做的,貌似不错,支持个。
    react-native-modal-dropdown
    cnblog的中文解释

    一个比较美丽的提示气泡toast
    react-native-root-toast

    图片上拉放大:https://github.com/lelandrichardson/react-native-parallax-view

    npm install react-native-gifted-form --save
    react-native-gifted-form

    颜色渐变
    npm install react-native-linear-gradient --save
    react-native-linear-gradient

    npm i react-native-app-intro --save
    react-native-app-intro

    https://github.com/spikef/react-native-gesture-password

    https://github.com/xudafeng/autoresponsive-react-native

    一个下拉打开页面,用在选项里面贼好用
    react-native-accordion

    做通讯录想必各位同学多多少少都要接触吧?这个好用
    react-native-alphabetlistview

    老板要是让你加自动填充怎么办?这边有
    react-native-alphabetlistview

    https://github.com/Dharmoslap/react-native-responsive-image

    https://github.com/vczero/react-native-tab-menu

    https://github.com/chirag04/react-native-tooltip

    https://github.com/aroth/react-native-uploader

    https://github.com/Cocoon-break/react-native-table-row

    https://github.com/Cocoon-break/react-native-table-row

    搜索框,带历史纪录

    下拉警告

    滑动动画选择

    调用系统打电话、发短信、发邮件、打开网址功能
    https://github.com/anarchicknight/react-native-communications

    快速检索列表(按首字母)
    https://github.com/johanneslumpe/react-native-selectablesectionlistview

    图表组件
    https://github.com/tomauty/react-native-chart

    动画组件
    https://github.com/oblador/react-native-animatable

    热更新
    https://github.com/Microsoft/react-native-code-push

    热更新(似乎更好)
    https://github.com/aerofs/react-native-auto-updater

    热更新(中国人写的)
    https://github.com/fengjundev/React-Native-Remote-Update

    列表下拉刷新
    https://github.com/syrusakbary/react-native-refresher

    下拉刷新和加载更多
    https://github.com/FaridSafi/react-native-gifted-listview

    左侧菜单与官方的DrawerLayoutAndroid 用法相同,兼容iOS
    https://github.com/iodine/react-native-drawer-layout

    条码扫描
    https://github.com/ideacreation/react-native-barcodescanner

    文件上传
    https://github.com/kamilkp/react-native-file-transfer

    支持Android和ios的toast
    https://github.com/remobile/react-native-toast

    获取设备各类信息
    https://github.com/rebeccahughes/react-native-device-info

    WebStorm ReactNative的代码模板插件,包括:
    1.组件名称2.Api 名称3.所有StyleSheets属性4.组件属性
    https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

    React-native调用cordova插件
    https://github.com/axemclion/react-native-cordova-plugin

    输入自动完成
    https://github.com/FaridSafi/react-native-google-places-autocomplete

    抖一抖动画小组件(有点意思)
    https://github.com/slavik0329/react-native-bounceable

    封装后动画组件(效果较丰富)
    https://github.com/oblador/react-native-animatable

    文件上传
    https://github.com/aroth/react-native-uploader

    jpush-react-native //官方版本
    https://github.com/jpush/jpush-react-native

    react-native-jpush 由 React Native 中文网开发维护。
    https://github.com/reactnativecn/react-native-jpush

    选项卡 https://github.com/exponentjs/react-native-tab-navigator

    material组件库(各种漂亮的小组件)
    https://github.com/xinthink/react-native-material-kit

    base组件库(各种封装不错的小组件)
    http://nativebase.io/docs/v0.4.6/components#anatomy
    https://github.com/GeekyAnts/NativeBase

    不错的按钮
    https://github.com/mastermoo/react-native-action-button
    https://github.com/ide/react-native-button

    输入框表单验证
    https://github.com/gcanti/tcomb-form-native
    https://github.com/FaridSafi/react-native-gifted-form
    https://github.com/bartonhammond/snowflake

    炫酷效果的 TextInput
    https://github.com/halilb/react-native-textinput-effects
    https://github.com/zbtang/React-Native-TextInputLayout

    聊天
    https://github.com/FaridSafi/react-native-gifted-chat

    地图
    https://github.com/lelandrichardson/react-native-maps

    动画
    https://github.com/oblador/react-native-animatable

    加载动画
    https://github.com/maxs15/react-native-spinkit

    抽屉效果
    https://github.com/root-two/react-native-drawer
    https://github.com/react-native-fellowship/react-native-side-menu

    侧滑按钮
    https://github.com/dancormier/react-native-swipeout
    https://github.com/jemise111/react-native-swipe-list-view

    图表
    https://github.com/tomauty/react-native-chart

    下拉放大
    https://github.com/lelandrichardson/react-native-parallax-view

    可滑动的日历组件
    https://github.com/cqm1994617/react-native-myCalendar

    语言转化和一些常用格式转换
    https://github.com/joshswan/react-native-globalize

    单选多选ListView
    https://github.com/hinet/react-native-checkboxlist

    选择按钮
    https://github.com/sconxu/react-native-checkbox

    二维码
    https://github.com/ideacreation/react-native-barcodescanner

    制作本地库
    https://github.com/frostney/react-native-create-library

    影音相关
    https://github.com/MisterAlex95/react-native-record-sound

    安卓录音
    https://github.com/bosung90/react-native-audio-android

    提示消息的Bar
    https://github.com/KBLNY/react-native-message-bar

    iOS原生TableView
    https://github.com/aksonov/react-native-tableview

    点击弹出视图
    https://github.com/jeanregisser/react-native-popover
    https://github.com/instea/react-native-popup-menu

    3D Touch
    https://github.com/madriska/react-native-quick-actions

    双平台兼容的ActionSheet
    https://github.com/beefe/react-native-actionsheet

    照片墙
    https://github.com/ldn0x7dc/react-native-gallery

    键盘遮挡问题
    https://github.com/reactnativecn/react-native-inputscrollview
    https://github.com/wix/react-native-keyboard-aware-scrollview

    本地存储
    https://github.com/sunnylqm/react-native-storage

    星星
    https://github.com/djchie/react-native-star-rating

    国际化
    https://github.com/joshswan/react-native-globalize

    扫描二维码
    https://github.com/lazaronixon/react-native-qrcode-reader

    通讯录
    https://github.com/rt2zz/react-native-contacts

    加密
    https://www.npmjs.com/package/crypto-js

    缓存管理
    https://github.com/reactnativecn/react-native-http-cache

    ListView的优化
    https://github.com/sghiassy/react-native-sglistview

    图片和base64互转
    https://github.com/xfumihiro/react-native-image-to-base64

    安卓 iOS 白屏解决
    https://github.com/mehcode/rn-splash-screen

    Text跑马灯效果
    https://github.com/remobile/react-native-marquee-label

    清除按钮的输入框
    https://github.com/beefe/react-native-textinput

    WebView相关
    https://github.com/alinz/react-native-webview-bridge

    判断横竖屏
    https://github.com/yamill/react-native-orientation

    PDF
    https://github.com/cnjon/react-native-pdf-view

    手势放大缩小移动
    https://github.com/kiddkai/react-native-gestures
    https://github.com/johanneslumpe/react-native-gesture-recognizers

    下拉-上拉-刷新
    https://github.com/FaridSafi/react-native-gifted-listview
    https://github.com/jsdf/react-native-refreshable-listview
    https://github.com/greatbsky/react-native-pull/wiki

    下拉选择
    https://github.com/alinz/react-native-dropdown

    图片查看
    https://github.com/oblador/react-native-lightbox

    照片选择
    https://github.com/marcshilling/react-native-image-picker
    https://github.com/ivpusic/react-native-image-crop-picker

    图片加载进度条
    https://github.com/oblador/react-native-image-progress

    轮播视图
    https://github.com/race604/react-native-viewpager
    https://github.com/FuYaoDe/react-native-app-intro
    https://github.com/appintheair/react-native-looped-carousel
    https://github.com/leecade/react-native-swiper

    模态视图
    https://github.com/maxs15/react-native-modalbox
    https://github.com/brentvatne/react-native-modal
    https://github.com/bodyflex/react-native-simple-modal

    毛玻璃效果
    https://github.com/react-native-fellowship/react-native-blur

    头像库
    https://github.com/oblador/react-native-vector-icons

    滑动选项卡
    https://github.com/skv-headless/react-native-scrollable-tab-view

    倒计时,电商APP,秒杀、团购倒计时
    https://github.com/jackuhan/react-native-CountDowntimer

    可滚动标签,可以点击切换,每个 tab 可以有自己的 ScrollView,点击切换的时候可以维护自己的滚动方向。
    类似网易新闻标签(首页)
    https://www.npmjs.com/package/react-native-scrollable-tab-view

    视频播放
    npm install react-native-video –save

    一款简单易用的 Toast 组件,支持 android&iOS.
    https://github.com/crazycodeboy/react-native-easy-toast?utm_source=tuicool&utm_medium=referral

    参考

    https://blog.csdn.net/Keep_Moving31038/article/details/77693737

    https://www.jianshu.com/p/c7a8f115dca0

    展开全文
  • React Native 使用 FlatList 和 ScrollView 实现 下拉刷新时,RefreshControl 控件不起作用, 后来经查明,原来 RefreshControl 要加在 ScrollView 的属性中,而不是 像普通 只有 FlatList 时,加在 FlatList 属性...

    React Native 使用 FlatList 和 ScrollView 实现 下拉刷新时,RefreshControl 控件不起作用,

    后来经查明,原来 RefreshControl 要加在 ScrollView 的属性中,而不是 像普通 只有 FlatList 时,加在 FlatList 属性中。

     

    下面是代码:

    <ScrollView showsVerticalScrollIndicator={false}
                    //下拉刷新 ,有 ScrollView 需要加载ScrollView,无则加到 FlatList
                            refreshControl={
                                <RefreshControl
                                    refreshing={this.state.isRefreshing}
                                    onRefresh={this._onRefresh.bind(this, 0)}
                                />
                            }
                >

    本博客地址: wukong1688

    本文原文地址:https://www.cnblogs.com/wukong1688/p/10897675.html

    转载请著名出处!谢谢~~

    转载于:https://www.cnblogs.com/wukong1688/p/10897675.html

    展开全文
  • Add it to your project ...Run npm install react-native-scrollable-tab-view --savevar ScrollableTabView = require('react-native-scrollable-tab-view'); Examples SimpleExample. ScrollableT

    Add it to your project

    1. Run npm install react-native-scrollable-tab-view --save
    2. var ScrollableTabView = require('react-native-scrollable-tab-view');

    Examples

    SimpleExample.

    ScrollableTabsExample.

    OverlayExample.

    FacebookExample.

    Basic usage

    var ScrollableTabView = require('react-native-scrollable-tab-view');
    
    var App = React.createClass({
      render() {
        return (
          <ScrollableTabView>
            <ReactPage tabLabel="React" />
            <FlowPage tabLabel="Flow" />
            <JestPage tabLabel="Jest" />
          </ScrollableTabView>
        );
      }
    });


    展开全文
  • 问题描述:当 swiper 嵌套在react-native-scrollable-tab-view中时,在 ios 端正常,但在 Android 端会导致 swiper 子视图不出现 打开 swiper 和scrollable的源码发现,在 Android 端使用的是 viewpagerAndroid, 猜测...
  • 1、使用react-native-tab-navigator实现APP底部菜单切换 2、首页和视频页使用FlatList实现下拉刷新/上拉加载功能 3、首页和视频页使用react-native-scrollable-tab-view实现选项卡切换栏目新闻功能 4、使用react-...
  • 1. 前言: 终于要开始编写业务代码了,今天将组合前面9天学习...import React, { Component } from &quot;react&quot;; import { FlatList, View, Text, StyleSheet, Button, RefreshControl, ActivityIndica...
  • React Native 项目常用第三方组件汇总: react-native-svg 绘图 react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-...
  • 本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的。...如下图,有一个滑动的tab切换,就是用react-native-scrollable-tab-view来实现的。 二、使用react-native-scrol...
  • 效果 实现思路 首先实现点击左侧数据,然后获取对应index,根据index显示对应的右侧数据 数据结构: const data1 = [ { "All": ["All"], }, { "Education class": [ "All", ... "Product
  • React Native常用组件

    2018-08-14 14:47:08
    本文收录了,React Native中常用的一些相关组件, 摘录的过程中,可能有所差错,不足之处还望指出. 希望大家可以互相学习,互帮互助! 第一部分 基于react-navigation组件的自定义 head 视图 react-native-...
  • react-native左右滑动插件(react-native-scrollable-tab-view)和listview组件冲突解决
  • React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React Native系列 ...
  • 效果图: 代码如下: _onRefresh = () => { this.setState({ refreshing: true }); // setTimeout模拟请求获取数据回调 setTimeout(() => { this.setState({ refreshing: false });......
  • 转:值得推荐的React Native学习资料 https://github.com/reactnativecn/react-native-guide React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源...
  • react-native 滑动标题栏

    2018-07-11 21:21:52
    在我们的应用中经常有上面显示一行标题栏,下面分别每个标题对应一个页面,标题栏与页面联动的情形,在Android中我们可以简单用Toolbar和ViewPager来实现,react-native中至今还没有提供原生的组件供我们来应用,但...
  • react-native-system-setting 修改系统设置 ...react-native-searchable-dropdown 下拉搜索框 lottie-react-native 动画封装库 VoiceLine-master 声音变化波浪效果 react-native-parallax-scroll-view 类似Scroll...
  • React Native学习资料

    2018-08-23 02:06:23
    官网: React 官方网站:https://reactjs.org/ React Github网址:...React Native官方网站:https://facebook.github.io/react-native/ React Native Github网址:https://github.com/facebook/...
1 2 3 4 5 ... 20
收藏数 1,198
精华内容 479