React-Native仿某电商商品详情页面

￡神魔★判官ぃ 2022-05-28 07:55 199阅读 0赞

**前言: 一周又过去了,一直在赶需求,除了自己利用空余时间学习一下外压根就没时间去研究新东西,唉~程序猿就是这样,活到老学到老!! 废话不多说了,公司产品觉得某电商的商品详情页面很nice,问我们能不能实现(宝宝心里苦),于是研究了一波,下面把我研究的东西分享一下,小伙伴有啥好的实现方式还谢谢分享一下哦~拜谢!**

先看一下最终实现的效果:  
ios/android

![这里写图片描述][70]

简单来说就是分为两个部分(上下),两个都是(scrollview、flatlist)等滑动组件,第一个scrollview滑动到底部的时候,继续上拉显示第二个scrollview,第二个scrollview下拉到顶部的时候,继续下拉回到第一个scrollview并且第一个scrollview回到顶部.

**下面说一下我的大体思路:**

**第一种方式:**  
利用rn手势,然后监听scrollview的滑动事件,我们都知道rn中的事件传递都是从父控件一层一层往下传递,所以父控件能够拦截scrollview也就是子控件的能力,当scrollview滑动到底部或者顶部的时候拦截scrollview的事件,把事件给父控件,然后通过控制父控件的垂直偏移量首先分页功能,说了那么多理论的东西小伙伴估计都累了,我们后面结合代码一起来说一下.

**第二种方式:**  
封装一个native的组件实现上拉和下拉的操作,rn只需要做一些简单的监听就可以.

两种方式对比来看,能用rn实现最好,因为rn存在的目的也就是为了实现跨平台目的,都用native实现了还用rn干嘛!! 话虽然这样说,但是rn还是给开发人员提供了自定义的方法,用第二种方式实现有点就是性能和体验上要优于rn实现,我接下来会结合两种方式来实现.

先说一下第一种方式

第一步(把页面分为上下两部分):

render() {
            return (
                <View
                    style={[styles.container]}
                >
                    {/*第一部分*/}
                    <Animated.View
                        style={[styles.container1,{
          
                            marginTop:this._aniBack.interpolate({
                                inputRange:[0,1],
                                outputRange:[0,-SCREEN_H],
                            })
                        }]}
                        {
         ...this._panResponder.panHandlers}
                    >
                        <Animated.View
                            ref={(ref) => this._container1 = ref}
                            style={
        {
        width: SCREEN_W, height: SCREEN_H,
                                marginTop:this._aniBack1.interpolate({
                                    inputRange:[0,1],
                                    outputRange:[0,-100],
                                })}}
                        >
                            <ScrollView
                                ref={(ref)=>this._scroll1=ref}
                                bounces={false}
                                scrollEventThrottle={10}
                                onScroll={this._onScroll.bind(this)}
                                overScrollMode={'never'}
                            >
                                {this._getContent()}
                            </ScrollView>
                        </Animated.View>
                        <View style={
        {
        width:SCREEN_W,height:100,backgroundColor:'white',alignItems:'center',justifyContent:'center'}}>
                            <Text>上拉查看详情</Text>
                        </View>
                    </Animated.View>
    
                    {/*第二部分*/}
                    <View
                        style={styles.container2}
                          {
         ...this._panResponder2.panHandlers}
                    >
                        <Animated.View
                            ref={(ref) => this._container2 = ref}
                            style={
        {
                                width:SCREEN_W,height:100,backgroundColor:'white',alignItems:'center',justifyContent:'center',
                                marginTop:this._aniBack2.interpolate({
                                    inputRange:[0,1],
                                    outputRange:[-100,0],
                                })
                            }}
                        >
                            <Text>下拉回到顶部</Text>
                        </Animated.View>
                        <View
                            style={
        {
        width: SCREEN_W, height: SCREEN_H,}}
                        >
                            <ScrollView
                                ref={(ref)=>this._scroll2=ref}
                                bounces={false}
                                scrollEventThrottle={10}
                                onScroll={this._onScroll2.bind(this)}
                                overScrollMode={'never'}
                            >
                                {this._getContent()}
                            </ScrollView>
                        </View>
                    </View>
                </View>
            );
        }

代码我待会会贴出来,原理很简单,我大体说一下我的实现思路,运行代码你会发现,页面是显示了一个红色页面(也就是上部分).

![这里写图片描述][70 1]

让我们把第一个页面的marginTop调为-SCREEN\_H(屏幕高度)的时候,我们会看到第二屏蓝色页面  
![这里写图片描述][70 2]

所以我们只需要在第一个红色页面的scrollview滑动到底部的时候,然后拦截事件,手指抬起的时候,让第一个页面的marginTop从(0到-屏幕高度)的转变,我们同时给个动画实现.那么问题来了,我们该怎么监听scrollview到达顶部或者底部呢?我们又该怎么拦截scrollview的事件呢?

监听scrollview到达顶部或者底部:

**到达顶部我们都知道,当scrollview的y轴偏移量=0的时候我们就认为scrollview到达顶部了,转为代码就是:**

_onScroll2(event){
            this._reachEnd2=false;
            let y = event.nativeEvent.contentOffset.y;
            if(y<=0){
            //到达顶部了
                this._reachEnd2=true;
            }
        }

**到达底部也就是当(子控件的高度=y轴滑动的距离+父控件的高度)的时候,转为代码为:**

_onScroll(event){
            this._reachEnd1=false;
            let y = event.nativeEvent.contentOffset.y;
            let height = event.nativeEvent.layoutMeasurement.height;
            let contentHeight = event.nativeEvent.contentSize.height;
            if (contentHeight > height && (y + height >= contentHeight)) {
            //到达顶部了
                this._reachEnd1=true;
            }
        }

父控件拦截子控件的事件:  
我们在onMoveShouldSetPanResponderCapture返回true,父控件就是拦截掉滑动事件,然后交给自己处理(onPanResponderMove),那么我们红色页面(也就是第一页)的scrollview到达底部的时候,再往上拉的时候,我们拦截事件

_handleMoveShouldSetPanResponderCapture(event: Object, gestureState: Object,): boolean {
            console.log('_handleMoveShouldSetPanResponderCapture');
            console.log(gestureState.dy);
            //当滑动到底部并且继续往上拉的时候
            return this._reachEnd1&&gestureState.dy<0;
        }

我们第二个页面(也就是蓝色页面)当scrollview滑动到顶部并且继续往下拉的时候,拦截事件:

_handleMoveShouldSetPanResponderCapture2(event: Object, gestureState: Object,): boolean {
              console.log(gestureState.dy);
              console.log('_handleMoveShouldSetPanResponderCapture2');
              //当滑动到顶部并且继续往下拉的时候
            return this._reachEnd2&&gestureState.dy>=0;
        }

好啦~我们第一个页面的父控件拿到滑动事件后,我们继续往上拉,也就是把往上拉的距离赋给我们的“上拉查看详情“组件了:  
\_handlePanResponderMove(event: Object, gestureState: Object): void \{  
//防止事件拦截不准,我们把scrollview的scrollEnabled:false设置为false  
this.\_scroll1.setNativeProps(\{  
scrollEnabled:false  
\})  
let nowLeft =gestureState.dy\*0.5;  
//控制一个页面的“上拉查看详情“组件显示  
this.\_container1.setNativeProps(\{  
marginTop:nowLeft  
\})  
console.log(‘\_handlePanResponderMove’,gestureState.dy);

<Animated.View
                            ref={(ref) => this._container1 = ref}
                            style={
        {
        width: SCREEN_W, height: SCREEN_H,
                                marginTop:this._aniBack1.interpolate({
                                    inputRange:[0,1],
                                    outputRange:[0,-100],
                                })}}
                        >
                            <ScrollView
                                ref={(ref)=>this._scroll1=ref}
                                bounces={false}
                                scrollEventThrottle={10}
                                onScroll={this._onScroll.bind(this)}
                                overScrollMode={'never'}
                            >
                                {this._getContent()}
                            </ScrollView>
                        </Animated.View>
                        <View style={
        {
        width:SCREEN_W,height:100,backgroundColor:'white',alignItems:'center',justifyContent:'center'}}>
                            <Text>上拉查看详情</Text>
                        </View>

代码很简单,我就不一一解释了,小伙伴自己去运行看看哈,下面是第一种方式的所有实现代码,直接运行就可以了:

/**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, {Component} from 'react';
    import {
        Platform,
        StyleSheet,
        Text,
        View,
        TouchableOpacity,
        Dimensions,
        ScrollView,
        PanResponder,
        Animated,
        StatusBar,
    } from 'react-native';
    const SCREEN_W = Dimensions.get('window').width;
    const SCREEN_H = Dimensions.get('window').height-(Platform.OS==='android'?StatusBar.currentHeight:0);
    import SwipeRow from './SwipeRow';
    
    export default class App extends Component {
        
        // 构造
          constructor(props) {
            super(props);
            // 初始状态
              // 初始状态
              this._panResponder = PanResponder.create({
                  onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture.bind(this),
                  onStartShouldSetResponderCapture:this._handleMoveShouldSetPanResponderCapture.bind(this),
                  onPanResponderMove: this._handlePanResponderMove.bind(this),
                  onPanResponderRelease: this._handlePanResponderEnd.bind(this),
                  onPanResponderGrant:this._handlePanGrant.bind(this),
                  onPanResponderTerminate:()=>{
                      console.log('onPanResponderTerminate');
                      this._aniBack1.setValue(0);
                      Animated.spring(this._aniBack1,{
                          toValue:1
                      }).start(()=>{
                          this._handlePanResponderEnd();
                      });
                  },
                  onShouldBlockNativeResponder: (event, gestureState) => false,//表示是否用 Native 平台的事件处理，默认是禁用的，全部使用 JS 中的事件处理，注意此函数目前只能在 Android 平台上使用
              });
              this._panResponder2 = PanResponder.create({
                  onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture2.bind(this),
                  onStartShouldSetResponderCapture:this._handleMoveShouldSetPanResponderCapture2.bind(this),
                  onPanResponderMove: this._handlePanResponderMove2.bind(this),
                  onPanResponderRelease: this._handlePanResponderEnd2.bind(this),
                  onPanResponderGrant:this._handlePanGrant2.bind(this),
                  onPanResponderTerminate:()=>{
                      this._container2.setNativeProps({
                          marginTop:0
                      })
                      this._aniBack2.setValue(0);
                      Animated.spring(this._aniBack2,{
                          toValue:1
                      }).start(()=>{
                          this._handlePanResponderEnd2();
                      });
                      console.log('onPanResponderTerminate2');
                  },
                  onShouldBlockNativeResponder: (event, gestureState) => false,//表示是否用 Native 平台的事件处理，默认是禁用的，全部使用 JS 中的事件处理，注意此函数目前只能在 Android 平台上使用
              });
              this._reachEnd1=false;
              this._reachEnd2=true;
              this._aniBack=new Animated.Value(0);
              this._aniBack1=new Animated.Value(0);
              this._aniBack2=new Animated.Value(0);
          }
        _handlePanGrant(event: Object, gestureState: Object,){
            this._scroll1.setNativeProps({
                scrollEnabled:false
            })
        }
        _handleMoveShouldSetPanResponderCapture(event: Object, gestureState: Object,): boolean {
            console.log('_handleMoveShouldSetPanResponderCapture');
            console.log(gestureState.dy);
            return this._reachEnd1&&gestureState.dy<0;
        }
        _handlePanResponderMove(event: Object, gestureState: Object): void {
              this._scroll1.setNativeProps({
                  scrollEnabled:false
              })
            let nowLeft =gestureState.dy*0.5;
            this._container1.setNativeProps({
                marginTop:nowLeft
            })
            console.log('_handlePanResponderMove',gestureState.dy);
        }
        _handlePanResponderEnd(event: Object, gestureState: Object): void {
            this._aniBack.setValue(0);
            this._scroll1.setNativeProps({
                scrollEnabled: true
            })
            this._scroll1.scrollTo({
       y:0},true);
            Animated.timing(this._aniBack, {
                duration: 500,
                toValue: 1
            }).start();
            this._aniBack1.setValue(1);
            Animated.spring(this._aniBack1, {
                toValue: 0
            }).start();
        }
    
        _handleMoveShouldSetPanResponderCapture2(event: Object, gestureState: Object,): boolean {
              console.log(gestureState.dy);
              console.log('_handleMoveShouldSetPanResponderCapture2');
            return this._reachEnd2&&gestureState.dy>=0;
        }
        _handlePanResponderMove2(event: Object, gestureState: Object): void {
              console.log('_handlePanResponderMove2');
            let nowLeft =gestureState.dy*0.5;
            this._scroll2.setNativeProps({
                scrollEnabled:false
            })
            this._container2.setNativeProps({
                marginTop:-100+nowLeft
            })
            console.log('_handlePanResponderMove2',gestureState.dy);
        }
        _handlePanGrant2(event: Object, gestureState: Object,){
            this._scroll2.setNativeProps({
                scrollEnabled:false
            })
        }
    
        _handlePanResponderEnd2(event: Object, gestureState: Object): void {
            this._aniBack.setValue(1);
            this._scroll2.setNativeProps({
                scrollEnabled: true
            })
            Animated.timing(this._aniBack, {
                duration: 500,
                toValue: 0
            }).start();
            this._aniBack2.setValue(1);
            Animated.spring(this._aniBack2, {
                toValue: 0
            }).start();
    
        }
        render() {
            return (
                <View
                    style={[styles.container]}
                >
                    {
       /*第一部分*/}
                    <Animated.View
                        style={[styles.container1,{
                            marginTop:this._aniBack.interpolate({
                                inputRange:[0,1],
                                outputRange:[0,-SCREEN_H],
                            })
                        }]}
                        {...this._panResponder.panHandlers}
                    >
                        <Animated.View
                            ref={
       (ref) => this._container1 = ref}
                            style={
       {
       width: SCREEN_W, height: SCREEN_H,
                                marginTop:this._aniBack1.interpolate({
                                    inputRange:[0,1],
                                    outputRange:[0,-100],
                                })}}
                        >
                            <ScrollView
                                ref={
       (ref)=>this._scroll1=ref}
                                bounces={
       false}
                                scrollEventThrottle={
       10}
                                onScroll={
       this._onScroll.bind(this)}
                                overScrollMode={
       'never'}
                            >
                                {
       this._getContent()}
                            </ScrollView>
                        </Animated.View>
                        <View style={
       {
       width:SCREEN_W,height:100,backgroundColor:'white',alignItems:'center',justifyContent:'center'}}>
                            <Text>上拉查看详情</Text>
                        </View>
                    </Animated.View>
    
                    {
       /*第二部分*/}
                    <View
                        style={styles.container2}
                          {...this._panResponder2.panHandlers}
                    >
                        <Animated.View
                            ref={
       (ref) => this._container2 = ref}
                            style={
       {
                                width:SCREEN_W,height:100,backgroundColor:'white',alignItems:'center',justifyContent:'center',
                                marginTop:this._aniBack2.interpolate({
                                    inputRange:[0,1],
                                    outputRange:[-100,0],
                                })
                            }}
                        >
                            <Text>下拉回到顶部</Text>
                        </Animated.View>
                        <View
                            style={
       {
       width: SCREEN_W, height: SCREEN_H,}}
                        >
                            <ScrollView
                                ref={
       (ref)=>this._scroll2=ref}
                                bounces={
       false}
                                scrollEventThrottle={
       10}
                                onScroll={
       this._onScroll2.bind(this)}
                                overScrollMode={
       'never'}
                            >
                                {
       this._getContent()}
                            </ScrollView>
                        </View>
                    </View>
                </View>
            );
        }
        _onScroll(event){
            this._reachEnd1=false;
            let y = event.nativeEvent.contentOffset.y;
            let height = event.nativeEvent.layoutMeasurement.height;
            let contentHeight = event.nativeEvent.contentSize.height;
            if (contentHeight > height && (y + height >= contentHeight)) {
                this._reachEnd1=true;
            }
        }
        _onScroll2(event){
            this._reachEnd2=false;
            let y = event.nativeEvent.contentOffset.y;
            if(y<=0){
                this._reachEnd2=true;
            }
        }
        _getContent(){
            let contents=[];
            for (let i = 0; i < 50; i++) {
                contents.push(
                    <Text style={
       {
       color:'#fff',marginTop:10}} key={
       'item'+i}>content-->{i}</Text>
                );
            }
            return contents;
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#F5FCFF',
            width: '100%',
            // transform:[{
       translateY:-SCREEN_H}]
        },
        container1:{
            width:SCREEN_W,
            height:SCREEN_H,
            backgroundColor:'red'
        },
        container2:{
            width:SCREEN_W,
            height:SCREEN_H,
            backgroundColor:'blue',
            overflow:'hidden'
        },
    });

简单说一下第二种方式(我之后会把项目的全部代码贴出来):

第一步(你需要封装一个上拉和下拉刷新的控件给rn,)为了方便我就直接去引用了一个第三方的下拉框架:  
[Android智能下拉刷新框架-SmartRefreshLayout][Android_-SmartRefreshLayout]

感谢这哥们的无私奉献~~我是怀着膜拜的心态看完了这哥们代码,大牛一枚,鉴定完毕~!! 哈哈~ 小伙伴也可以去看看哈,我就不解释这框架了,直接拿过来用了.

最后rn用的时候很简单:

/**
     * @author YASIN
     * @version [React-Native Ocj V01, 2018/3/28]
     * @date 17/2/23
     * @description App2
     */
    import React, {Component} from 'react';
    import {
        Platform,
        StyleSheet,
        Text,
        View,
        TouchableOpacity,
        Dimensions,
        ScrollView,
        PanResponder,
        Animated,
        StatusBar,
    } from 'react-native';
    
    const SCREEN_W = Dimensions.get('window').width;
    const SCREEN_H = Dimensions.get('window').height - (Platform.OS === 'android' ? StatusBar.currentHeight : 0);
    
    import SmallLayout from './SmartRefreshLayout';
    
    export default class App2 extends Component {
        
        // 构造
        constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                loadMore1: false,
                loadMore1: false,
            };
            this.aniBack = new Animated.Value(0);
        }
    
        render() {
            return (
                <Animated.View
                    style={[styles.container, {
                        marginTop: this.aniBack.interpolate({
                            inputRange: [0, 1],
                            outputRange: [0, -SCREEN_H],
                        })
                    }]}
                >
                    {
       /*第一部分*/}
                    <SmallLayout
                        style={
       {
       width: '100%', height: SCREEN_H, backgroundColor: 'red'}}
                        loadMore={
       this.state.loadMore1}
                        refreshEnable={
       false}
                        onLoadMore={
       () => {
                            this._startAniNext();
                        }}
                    >
                        <ScrollView
                        >
                            {
       this._getContent()}
                        </ScrollView>
                    </SmallLayout>
                    {
       /*第二部分*/}
                    <SmallLayout
                        key={
       'small2'}
                        style={
       {
       width: '100%', height: SCREEN_H, backgroundColor: 'blue'}}
                        refreshing={
       this.state.loadMore2}
                        loadMoreEnable={
       false}
                        onRefresh={
       ()=>{
                            this._startAniBackTop();
                        }}
                    >
                        <ScrollView
                        >
                            {
       this._getContent()}
                        </ScrollView>
                    </SmallLayout>
                </Animated.View>
            );
        }
    
        _startAniBackTop() {
            this.aniBack.setValue(1);
            Animated.timing(this.aniBack, {
                duration: 1000,
                toValue: 0,
            }).start(() => {
            });
        }
    
        _startAniNext() {
            this.aniBack.setValue(0);
            Animated.timing(this.aniBack, {
                duration: 1000,
                toValue: 1,
            }).start(() => {
            });
        }
    
        _getContent() {
            let contents = [];
            for (let i = 0; i < 50; i++) {
                contents.push(
                    <Text style={
         {color: '#fff', marginTop: 10}} key={
         'item' + i}>content-->{i}</Text>
                );
            }
            return contents;
        }
    }
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            width: '100%',
        }
    });

是不是很简单?对的,简简单单100行代码就搞定了,然后效果咋样?  
![这里写图片描述][70 3]

事件衔接很平滑,体验比rn好!当然,我只实现了android部分,小伙伴懂ios的也可以把ios的实现一下~~  
我简单说一下与native的桥接(原谅我只能以android为例子)

第一步(新建一个SmartRefreshLayoutManager继承ViewGroupManager,然后提供rn调用的属性跟方法还有回调):

/**
     * Copyright (c) 2015-present, Facebook, Inc.
     * All rights reserved.
     * <p>
     * This source code is licensed under the BSD-style license found in the
     * LICENSE file in the root directory of this source tree. An additional grant
     * of patent rights can be found in the PATENTS file in the same directory.
     */
    
    package com.swipedemo;
    
    
    import android.support.annotation.NonNull;
    
    import com.facebook.react.bridge.ReactContext;
    import com.facebook.react.common.MapBuilder;
    import com.facebook.react.module.annotations.ReactModule;
    import com.facebook.react.uimanager.ThemedReactContext;
    import com.facebook.react.uimanager.UIManagerModule;
    import com.facebook.react.uimanager.ViewGroupManager;
    import com.facebook.react.uimanager.annotations.ReactProp;
    import com.facebook.react.uimanager.events.Event;
    import com.facebook.react.uimanager.events.EventDispatcher;
    import com.scwang.smartrefresh.layout.SmartRefreshLayout;
    import com.scwang.smartrefresh.layout.api.RefreshLayout;
    import com.scwang.smartrefresh.layout.listener.OnLoadMoreListener;
    import com.scwang.smartrefresh.layout.listener.OnRefreshListener;
    
    import java.util.Map;
    
    /**
     * ViewManager for {@link com.facebook.react.views.swiperefresh.ReactSwipeRefreshLayout} which allows the user to "pull to refresh" a
     * child view. Emits an {@code onRefresh} event when this happens.
     */
    @ReactModule(name = SmartRefreshLayoutManager.REACT_CLASS)
    public class SmartRefreshLayoutManager extends ViewGroupManager<SmartRefreshLayout> {
    
        protected static final String REACT_CLASS = "AndroidSmartRefreshLayout";
    
        @ReactProp(name = "refreshing")
        public void setRefreshing(SmartRefreshLayout view, boolean refreshing) {
            if (refreshing) {
                view.autoRefresh();
            } else {
                view.finishRefresh();
            }
        }
    
        @ReactProp(name = "loadMore")
        public void setLoadMore(SmartRefreshLayout view, boolean refreshing) {
            if (refreshing) {
                view.autoLoadMore();
            } else {
                view.finishLoadMore();
            }
        }
        @ReactProp(name = "loadMoreEnable")
        public void setLoadMoreEnable(SmartRefreshLayout view, boolean enable) {
            view.setEnableLoadMore(enable);
        }
        @ReactProp(name = "refreshEnable")
        public void setRefreshEnable(SmartRefreshLayout view, boolean enable) {
            view.setEnableRefresh(enable);
        }
        @Override
        protected SmartRefreshLayout createViewInstance(ThemedReactContext reactContext) {
            final SmartRefreshLayout smartRefreshLayout = new SmartRefreshLayout(reactContext);
            smartRefreshLayout.setOnLoadMoreListener(new OnLoadMoreListener() {
                @Override
                public void onLoadMore(@NonNull final RefreshLayout refreshLayout) {
                    dispatchEvent(smartRefreshLayout,new LoadMoreEvent(smartRefreshLayout.getId()));
                }
            });
            smartRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
                @Override
                public void onRefresh(@NonNull RefreshLayout refreshLayout) {
                    dispatchEvent(smartRefreshLayout,new RefreshEvent(smartRefreshLayout.getId()));
                }
            });
            //触发自动刷新
            smartRefreshLayout.setRefreshHeader(new CustHeader(reactContext));
    //        smartRefreshLayout.setEnableOverScrollBounce(true);
            smartRefreshLayout.setEnableOverScrollDrag(false);
            smartRefreshLayout.setEnableAutoLoadMore(false);
            smartRefreshLayout.setRefreshFooter(new CustFooter(reactContext));
            return smartRefreshLayout;
        }
    
        @Override
        public String getName() {
            return REACT_CLASS;
        }
        @Override
        public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
            return MapBuilder.<String, Object>builder()
                    .put("topRefresh", MapBuilder.of("registrationName", "onRefresh"))
                    .put("bottomRefresh", MapBuilder.of("registrationName", "onLoadMore"))
                    .build();
        }
        protected static void dispatchEvent(SmartRefreshLayout refreshLayout, Event event) {
            ReactContext reactContext = (ReactContext) refreshLayout.getContext();
            EventDispatcher eventDispatcher =
                    reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
            eventDispatcher.dispatchEvent(event);
        }
    }

我只能说还是需要一点android基础才能看懂这代码的,哈哈~ 原谅我又装了一个b, 会android的我就不用解释这是啥了~~不懂的可以查看原生给rn封装的自带的下拉刷新组件:

![这里写图片描述][70 4]

哈哈~ 我也是仿照自带的AndroidSwipeRefreshLayout组件封装的,所以android的童鞋没事研究一下源码还是很有必要的.

好啦~ 逼装完了,我们继续哈,

然后新建一个叫SmartRefreshLayoutPackage类继承ReactPackage把SmartRefreshLayoutManager添加进去:

package com.swipedemo;
    
    import com.facebook.react.ReactPackage;
    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.uimanager.ViewManager;
    
    import java.util.Arrays;
    import java.util.Collections;
    import java.util.List;
    
    /**
     * Created by yinqingyang on 2018/3/28.
     */
    
    public class SmartRefreshLayoutPackage implements ReactPackage {
        
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Arrays.<ViewManager>asList(new SmartRefreshLayoutManager());
        }
    }

最后将我们的SmartRefreshLayoutPackage添加进rn,我们来到我们的MainApplication:

public class MainApplication extends Application implements ReactApplication {
        
        static {
            SmartRefreshLayout.setDefaultRefreshHeaderCreator(new DefaultRefreshHeaderCreator() {
                @NonNull
                @Override
                public RefreshHeader createRefreshHeader(@NonNull Context context, @NonNull RefreshLayout layout) {
                    layout.setPrimaryColorsId(R.color.colorPrimaryDark, android.R.color.white);//全局设置主题颜色
                    return new ClassicsHeader(context).setTimeFormat(new DynamicTimeFormat("更新于 %s")).setArrowResource(R.mipmap.ic_launcher);
                }
            });
            SmartRefreshLayout.setDefaultRefreshFooterCreator(new DefaultRefreshFooterCreator() {
                @NonNull
                @Override
                public RefreshFooter createRefreshFooter(@NonNull Context context, @NonNull RefreshLayout layout) {
                    return new ClassicsFooter(context);
                }
            });
        }
        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
            @Override
            public boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG;
            }
    
            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.<ReactPackage>asList(
                        new MainReactPackage(),
                        //添加我们的自定义package
                        new SmartRefreshLayoutPackage()
                );
            }
    
            @Override
            protected String getJSMainModuleName() {
                return "index";
            }
        };

好啦!我们已经搞定原生部分了,那么我们的rn怎么才能拿到我们原生提供的view呢?

回到rn

第一步:我们创建一个SmartRefreshLayout.android.js文件,提供跟native 一样的属性:

export default class SmartRefreshLayout extends Component {
        
        static propTypes = {
            ...ViewPropTypes,
            refreshing: PropTypes.bool,
            loadMore: PropTypes.bool,
            onLoadMore: PropTypes.func,
            onRefresh: PropTypes.func,
            loadMoreEnable: PropTypes.bool,
            refreshEnable: PropTypes.bool,
        };
        static defaultProps = {
            refreshing: false,
            loadMore: false,
            refreshEnable: true,
            loadMoreEnable: true,
        };

**记住!! native有的属性,我们定义的view一定要有.**

然后通过rn自带的requireNativeComponent方法把native的view桥接过来:

const AndroidSmartRefreshLayout = requireNativeComponent('AndroidSmartRefreshLayout', SmartRefreshLayout);

最后渲染出来:

render() {
            const {children, style, loadMore, refreshing, refreshEnable, loadMoreEnable} = this.props;
            return (
                <AndroidSmartRefreshLayout
                    ref={ref => {
                        this._nativeRef = ref;
                    }}
                    style={[style]}
                    onLoadMore={this._onLoadMore}
                    onRefresh={this._onRefresh}
                    loadMore={loadMore}
                    refreshEnable={refreshEnable}
                    loadMoreEnable={loadMoreEnable}
                    refreshing={refreshing}
                >
                    {React.Children.toArray(children)}
                </AndroidSmartRefreshLayout>
            );
        }

全部代码:

/**
     * @author YASIN
     * @version [React-Native Ocj V01, 2018/3/28]
     * @date 17/2/23
     * @description SmartRefreshLayout.android
     */
    import React, {Component} from 'react';
    import {
        Platform,
        StyleSheet,
        Text,
        View,
    } from 'react-native';
    
    const PropTypes = require('prop-types');
    const ViewPropTypes = require('ViewPropTypes');
    const requireNativeComponent = require('requireNativeComponent');
    export default class SmartRefreshLayout extends Component {
        
        static propTypes = {
            ...ViewPropTypes,
            refreshing: PropTypes.bool,
            loadMore: PropTypes.bool,
            onLoadMore: PropTypes.func,
            onRefresh: PropTypes.func,
            loadMoreEnable: PropTypes.bool,
            refreshEnable: PropTypes.bool,
        };
        static defaultProps = {
            refreshing: false,
            loadMore: false,
            refreshEnable: true,
            loadMoreEnable: true,
        };
    
        // 构造
        constructor(props) {
            super(props);
            this._lastNativeLoadMore = false;
            this._lastNativeRefresh = false;
        }
    
        render() {
            const {children, style, loadMore, refreshing, refreshEnable, loadMoreEnable} = this.props;
            return (
                <AndroidSmartRefreshLayout
                    ref={ref => {
                        this._nativeRef = ref;
                    }}
                    style={[style]}
                    onLoadMore={
       this._onLoadMore}
                    onRefresh={
       this._onRefresh}
                    loadMore={loadMore}
                    refreshEnable={refreshEnable}
                    loadMoreEnable={loadMoreEnable}
                    refreshing={refreshing}
                >
                    {React.Children.toArray(children)}
                </AndroidSmartRefreshLayout>
            );
        }
    
        componentDidMount() {
            this._lastNativeLoadMore = this.props.refreshing;
        };
    
        componentDidUpdate(prevProps: { loadMore: boolean }) {
            // RefreshControl is a controlled component so if the native refreshing
            // value doesn't match the current js refreshing prop update it to
            // the js value.
            if (this.props.loadMore !== prevProps.loadMore) {
                this._lastNativeLoadMore = this.props.loadMore;
            } else if (this.props.loadMore !== this._lastNativeLoadMore) {
                this._nativeRef.setNativeProps({loadMore: this.props.loadMore});
                this._lastNativeLoadMore = this.props.loadMore;
            }
    
            if (this.props.refreshing !== prevProps.refreshing) {
                this._lastNativeRefresh = this.props.refreshing;
            } else if (this.props.refreshing !== this._lastNativeRefresh) {
                this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
                this._lastNativeRefresh = this.props.refreshing;
            }
        }
    
        _onLoadMore = (event) => {
            this._lastNativeLoadMore = true;
    
            this.props.onLoadMore && this.props.onLoadMore();
            // The native component will start refreshing so force an update to
            // make sure it stays in sync with the js component.
            this.forceUpdate();
        }
        _onRefresh=(event)=>{
            this._lastNativeRefresh = true;
    
            this.props.onRefresh && this.props.onRefresh();
            // The native component will start refreshing so force an update to
            // make sure it stays in sync with the js component.
            this.forceUpdate();
        }
    }
    const AndroidSmartRefreshLayout = requireNativeComponent('AndroidSmartRefreshLayout', SmartRefreshLayout);

好啦! 我们按照我们第一种实现方式的部分代码实现一下:

最后运行代码就可以看到我们之前截图的效果了.

欢迎交流,欢迎入群~~

项目github地址:  
[https://github.com/913453448/SwipeDemo][https_github.com_913453448_SwipeDemo]

[70]: /images/20220528/17e5c43efebf42de94ec430e9dae509c.png
[70 1]: /images/20220528/a70f5fdfe22243d49d7172974ac9bd32.png
[70 2]: /images/20220528/40b5c14c423a4534b45c61b367ec4c98.png
[Android_-SmartRefreshLayout]: https://www.jianshu.com/p/7479b6ed5ebf
[70 3]: /images/20220528/21c165e5fad54407b61da25c74472aa3.png
[70 4]: /images/20220528/7958af13e0e04db38f60080bace85fa1.png
[https_github.com_913453448_SwipeDemo]: https://github.com/913453448/SwipeDemo