native react 弹幕_react native 弹幕 - CSDN
  • React Native 中使用Android原生的弹幕

    Facebook的React Native 框架让我们移动端的民工眼前一亮啊,然而有个很蛋疼的问题就是目前react native提供的API目前有很多没办法满足我们,还好万能的react native为我们提供了自定义的方法,下面我们就一步一步的实现。

         比如我们使用react native做一个弹幕。

                             

          1 首先我们在原生的Android找到先关的弹幕框架加入RN项目的Android端的依赖,这里我用的是github上的

    compile 'com.github.ctiao:DanmakuFlameMaster:0.5.3'

          2 然后我们就在Android中得到弹幕视图

            

    package com.danmuView;
    
    import android.content.Context;
    import android.graphics.Color;
    import android.support.annotation.Nullable;
    import android.view.ContextThemeWrapper;
    import android.view.View;
    
    import com.facebook.react.bridge.ReactMethod;
    import com.facebook.react.uimanager.SimpleViewManager;
    import com.facebook.react.uimanager.ThemedReactContext;
    import com.facebook.react.uimanager.annotations.ReactProp;
    import java.util.Random;
    
    import master.flame.danmaku.controller.DrawHandler;
    import master.flame.danmaku.danmaku.model.BaseDanmaku;
    import master.flame.danmaku.danmaku.model.DanmakuTimer;
    import master.flame.danmaku.danmaku.model.IDanmakus;
    import master.flame.danmaku.danmaku.model.android.DanmakuContext;
    import master.flame.danmaku.danmaku.model.android.Danmakus;
    import master.flame.danmaku.danmaku.parser.BaseDanmakuParser;
    import master.flame.danmaku.ui.widget.DanmakuView;
    
    /**
     * Created by cz on 2017/1/24.
     */
    
    public class DanmuView extends SimpleViewManager {
        private String MOUDLENAME = "DanmuView";
        public static boolean showDanmaku;
        static  Context context;
        //弹幕控制器
        public static DanmakuContext   danmakuContext;
        //弹幕view
        public static DanmakuView danmakuView;
        @Override
        public String getName() {
            return MOUDLENAME;
        }
    
        @Override
        protected View createViewInstance(ThemedReactContext reactContext) {
            context = reactContext;
            danmakuView = new DanmakuView(reactContext);
            //提升绘制效率
            danmakuView.enableDanmakuDrawingCache(true);
            //设置回调
            danmakuView.setCallback(new DrawHandler.Callback() {
                @Override
                public void prepared() {
                    //准备完成开始显示
                    showDanmaku = false;
                    danmakuView.start();
                    generateSomeDanmaku();
                }
    
                @Override
                public void updateTimer(DanmakuTimer timer) {
    
                }
    
                @Override
                public void danmakuShown(BaseDanmaku danmaku) {
    
                }
    
                @Override
                public void drawingFinished() {
    
                }
            });
            //创建DanmakuContext实例。DanmakuContext可以用于对弹幕的各种全局配置进行设定,如设置字体、设置最大显示行数等,这里我们设置为默认
            danmakuContext = DanmakuContext.create();
            //弹幕解析器
            BaseDanmakuParser parser = new BaseDanmakuParser() {
                @Override
                protected IDanmakus parse() {
                    return new Danmakus();
                }
            };
            danmakuView.prepare(parser, danmakuContext);
    
             return danmakuView;
        }
        /**
         * sp转px的方法。
         */
        public static int sp2px(float spValue) {
            final float fontScale =new ContextThemeWrapper(context,0).getResources().getDisplayMetrics().scaledDensity;
            return (int) (spValue * fontScale + 0.5f);
        }
    
        /**
         * 向弹幕View中添加一条弹幕
         *
         * @param content    弹幕的具体内容
         * @param withBorder 弹幕是否有边框
         */
        public static  void addDanmaku(String content, boolean withBorder) {
            BaseDanmaku danmaku = danmakuContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL);
            danmaku.text = content;
            danmaku.padding = 5;
            danmaku.textSize = sp2px(20);
            danmaku.textColor = Color.WHITE;
            danmaku.setTime(danmakuView.getCurrentTime());
            if (withBorder) {
                danmaku.borderColor = Color.GREEN;
            }
            danmakuView.addDanmaku(danmaku);
        }
        /**
         * 随机生成一些弹幕内容以供测试
         */
        public static void generateSomeDanmaku() {
            new Thread(new Runnable() {
                @Override
                public void run() {
                    while (showDanmaku) {
                        int time = new Random().nextInt(300);
                        String content = "弹幕--nima" + time + time;
                        addDanmaku(content, false);
                        try {
                            Thread.sleep(time);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }).start();
    
    
    
    
    
    
        }
        @ReactProp(name = "needShow")
        public void setShowDanmu(DanmakuView  danmakuView, @Nullable String needShow ){
                 if("Y".equals(needShow)){
                     danmakuView.show();
                 }else {
                     danmakuView.hide();
                 }
        }
        @ReactMethod
        public  void  showDanmu(){
                 if(showDanmaku ){
                      showDanmaku =false;
                     generateSomeDanmaku();
                 }else {
                     showDanmaku=true;
                     generateSomeDanmaku();
                 }
        }
    
        @ReactMethod
        public void destoryDanmu(){
            showDanmaku = false;
            if (danmakuView != null) {
                danmakuView.release();
                danmakuView = null;
            }
        }
    }
    


        3 为js端提供module接口

    package com.danmuView;
    
    import com.facebook.react.ReactPackage;
    import com.facebook.react.bridge.JavaScriptModule;
    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 cz on 2017/1/24.
     */
    
    public class DanmuViewReactPackage implements ReactPackage {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            return Collections.emptyList();
    
        }
    
        @Override
        public List<Class<? extends JavaScriptModule>> createJSModules() {
            return Collections.emptyList();
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Arrays.<ViewManager>asList(
                    new DanmuView());
        }
    }
    

        4我们的弹幕接口已经封装完成,接下来我们需要对我们的弹幕进行控制,先把控制的方法封装完成


    package com.danmuView;
    
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;
    
    import static com.danmuView.DanmuView.addDanmaku;
    import static com.danmuView.DanmuView.danmakuView;
    import static com.danmuView.DanmuView.generateSomeDanmaku;
    import static com.danmuView.DanmuView.showDanmaku;
    
    /**
     * Created by cz  on 2017/1/25.
     */
    
    public class DanmuControl extends ReactContextBaseJavaModule {
        private  String MOUDLENAME = "DanmuControl";
        public DanmuControl(ReactApplicationContext reactContext) {
            super(reactContext);
        }
    
        @Override
        public String getName() {
            return MOUDLENAME;
        }
        @ReactMethod
        public  void  showDanmu(){
            if(showDanmaku ){
                showDanmaku =false;
                generateSomeDanmaku();
            }else {
                showDanmaku=true;
                generateSomeDanmaku();
            }
        }
       @ReactMethod
       public void addDanmu(String content, boolean withBorder){
           System.out.println("chenzhu--->添加一条弹幕");
           addDanmaku(content,withBorder);
       }
    
        @ReactMethod
        public void destoryDanmu(){
            System.out.println("chenzhu--->销毁弹幕");
            showDanmaku = false;
            if (danmakuView != null) {
                danmakuView.release();
                danmakuView = null;
            }
        }
    }
    


        5将我们的控制方法暴露给我们的js端

    package com.danmuView;
    
    import com.facebook.react.ReactPackage;
    import com.facebook.react.bridge.JavaScriptModule;
    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.uimanager.ViewManager;
    import com.startactivitydemo.MyIntentModule;
    
    import java.util.Arrays;
    import java.util.Collections;
    import java.util.List;
    
    /**
     * Created by cz  on 2017/1/25.
     */
    
    public class DanmuControlReactPackage implements ReactPackage {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            return Arrays.<NativeModule>asList(
                    new DanmuControl(reactContext));
        }
    
        @Override
        public List<Class<? extends JavaScriptModule>> createJSModules() {
            return Collections.emptyList();
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    }
    


        6将我们自己封装的module注册到APPlocation中:

    new DanmuViewReactPackage(),

    new DanmuControlReactPackage(),

      7我们在js端先建一个对应的view类

    /**
     * Created by cz on 2017/1/24.
     */
    'use strict';
    
    import { PropTypes } from 'react';
    import { requireNativeComponent, View } from 'react-native';
    var iface = {
        name: 'DanmuView',
        propTypes: {
            needShow:  PropTypes.string ,
            ...View.propTypes // 包含默认的View的属性
        },
    
    };
    
    export  default module.exports = requireNativeComponent('DanmuView', iface);

    然后就可以在你想是用的地方导入使用了,就和普通的控件类似的使用方法。


     8 刚才我们还Android本地封装了控制弹幕的方法使用也是非常的方便:

       

    onPress={()=>{ NativeModules.DanmuControl.addDanmu("添加一条弹幕测试--------",true);}}>

    直接在你需要响应的事件下面通过NativeModules点上类名在点上方法名即可。



           注意在封装modulepackg的时候返回的name要与你在js端自己定义的类名相同才能找到。

           所以理论上Android能实现的功能react native都能实现,但是却丢失了react native的最初的意图,

           不能完全的热更新了。所以大家在不到万不得已的情况下还是慎用
















    展开全文
  • react native弹幕插件(android)
  • 前端实现直播弹幕

    2019-07-21 17:50:13
    1,在一定的可视区划分出几条水平轨道,然后在轨道中添加弹幕,这样基本可以防止弹幕的重叠 2,建立所需要的dom节点并添加到dom池里面,dom节点总数=轨道数X每条轨道可放置的最大弹幕数,并把建好的dom节点加入到...

    1:DOM实现

    实现思路:

    1,在一定的可视区划分出几条水平轨道,然后在轨道中添加弹幕,这样基本可以防止弹幕的重叠

    2,建立所需要的dom节点并添加到dom池里面,dom节点总数=轨道数X每条轨道可放置的最大弹幕数,并把建好的dom节点加入到可视区容器里面通过添加class使其定位到可视区外部,并绑定相应的事件进行逻辑处理(注意作用域问题)

    3,建立轨道是否可放置弹幕判断函数,此位置为true则表示此条轨道可进行弹幕的展示,否则不行,当弹幕运动一定的时间后可以把此条轨道的状态置为true

    4,建立轨道选择函数,通过依次遍历轨道状态来选择一条轨道进行弹幕的展示,若不存在这样的轨道则返回-1

    5,建立弹幕发送函数,从弹幕池依次中取出弹幕,从dom池中依次取出dom,组装成dom节点,然后给此dom增删相应的css属性实现dom的运动(此实现使用的是transtion+transform来实现dom运动,可大大提高性能)

    6,添加一个定时器,定时触发弹幕发送函数

    7,关闭弹幕,停止定时器,同时把所有dom节点移到不可见区域,添加弹幕,把弹幕信息push到弹幕池

    核心代码:

    html:

    <div class="container">

    <div class="displayArea">

    <video poster="https://wx2.sinaimg.cn/large/866a8516gy1g3x2z9sfcmj20k00k077y.jpg" src="https://file.veryzhun.com/buckets/carnoc/keys/2e65fc781e106bbeb48763b9e2b7ec41.mp4" controls="controls" tabindex="0" preload="metadata" style="width:800px;height:600px;object-fit: fill"></video

    </div>

    <div class="optionArea">

    <p class="closeDanmo">关闭弹幕<input type="checkbox" οnchange="controlDanmo()"></p>

    <p class="sendDanmo">

    <input type="text" placeholder="~说点什么吧~" οnkeydοwn="sendDanmo()">

    <span οnclick="tianjiaDanmo()">发送</span>

    </p>

    </div>

    </div>

    js(使用了jq):

    <script type="text/javascript"

    src="https://res.variflight.com/carnoc/zt/index_zt/fast/jquery/jquery-1.8.3.min.js"></script>

    <script src="弹幕数据.js" charset="UTF-8"></script>

    <script>

    var danmoChi = __data__;

    var domChi = [];

    //判断该通道是否可以放置弹幕

    var hasPos = [];

    var MAX_Channel = 8;

    var MAX_Number = 6;

    timer = null;

    //最大通道数和每条通道的弹幕数,可视区最大需要的dom数量为8x4=32

    function init() {

    for (let i = 0; i < MAX_Channel; i++) {

    var doms = [];

    for (let j = 0; j < MAX_Number; j++) {

    let dom = document.createElement('p');

    $('.displayArea')[0].appendChild(dom);

    dom.className = 'right';

    dom.style.top = i * 60 + 'px';

    doms.push(dom);

    //该条弹幕已经移出了可视区

    dom.addEventListener('transitionend', () => {

    dom.className = 'right';

    dom.style.transform = null;

    //新发的弹幕直接加入到dom池最前的位置

    domChi[i].push(dom);

    })

    }

    domChi.push(doms);

    //初始时每个通道都可放置弹幕

    hasPos[i] = true

    }

     

     

    }

     

    //选择一个可以发送弹幕的通道

    function chioceChnnel() {

    for (let i = 0; i < MAX_Channel; i++) {

    if (hasPos[i] && domChi[i].length > 0) {

    return i

    }

    }

    return -1

     

    }

    //发送弹幕

    function shotDanmo(dom, text, channel) {

    dom.innerText = text;

    dom.className = 'left';

    hasPos[channel] = false;

    var cw = dom.clientWidth;

    dom.style.transform = `translateX(${-dom.clientWidth}px)`;

    //等待这条弹幕移动一段距离后释放改通道

    setTimeout(function () {

    hasPos[channel] = true

    }, cw * 10 + 1000);

    }

    function open() {

    timer = setInterval(function () {

    let chnnel = chioceChnnel();

    if (danmoChi.length > 0 && chnnel != -1) {

    let dom = domChi[chnnel].shift();

    let danmo = danmoChi.shift();

    shotDanmo(dom, danmo.content, chnnel)

    }

     

    }, 10)

     

    }

     

     

    function close() {

    clearInterval(timer);

    $('.displayArea p').addClass('right')

    $('.displayArea p').css({'transform': null})

    }

    window.onload = function () {

    init();

     

    open();

    };

     

    function controlDanmo(e) {

     

    let event = e || window.event;

     

    if (event.target.checked) {

    close()

    }

    else {

    open()

    }

    }

    function tianjiaDanmo() {

    var val = $('.sendDanmo input').val();

     

    if (val.trim()) {

    var obj = {};

    obj.img = "";

    obj.content = val;

    danmoChi.push(obj);

    $('.sendDanmo input').val("");

    console.log('发送弹幕成功!')

    }

    }

    function sendDanmo(e) {

    let event = e || window.event;

    if (event.code == 'Enter') {

    tianjiaDanmo();

    }

    }

     

    </script>

     

    注:弹幕.js里面是用户发送的弹幕,这里我随便编的几个弹幕来进行模拟的结构是

    var _data_=[

    {

    img:'',//发送弹幕用户的头像

    content:""//弹幕内容

    }

    ................

    ]

    效果:

    弹幕

     

    总结:

    设计优点;利用css3动画通过修改class自动实现了运动,实现起来较为简单且兼容性较强,性能也还不错,但是在dom绑定transitionend事件时要注意变量作用域,这里我使用let不会有什么问题,使用var时要注意闭包问题、

    缺点:不断通过定时器来进行弹幕剩余检测,会消耗部分性能

     

    2:canvas实现

    实现思路基本和上面一致,

    1,创建canvas,fillText构造函数用来创建弹幕对象

    2,轨道划分判断原则,当此条轨道发出弹幕的瞬间状态置为“忙碌”,当运动一段时间后置空闲,再在剩余空闲的轨道中随机选择一条这样就基本避免了弹幕重叠的问题。

    3,弹幕运动,通过定时器修改弹幕的坐标,并且重绘所有弹幕

    4,发送弹幕,通过定时器定时检测弹幕池如果有弹幕则发射弹幕

     

    核心代码:

    html:

    <div class="container">

    <div class="displayArea">

    <canvas id="cav" width="800" height="600"></canvas>

    </div>

    <div class="optionArea">

    <p class="sendDanmo">

    <input type="text" placeholder="~说点什么吧~" οnkeydοwn="sendDanmo()" id="ctx">

    <span οnclick="tianjiaDanmo()">发送</span>

    </p>

    </div>

    </div>

    JS:

    script src="弹幕数据.js" charset="UTF-8"></script>

    <script>

    var cav = document.getElementById('cav');

    var context = cav.getContext('2d');

    var W = document.getElementById('cav').clientWidth;

    var H = document.getElementById('cav').clientHeight;

    var timer = null;

    var tms = null;

    //发射弹幕速度

    const popSpeed=100;

    //弹幕移动速度

    const moveSpeed=10;

    const MAX_Channel = 9;

    //单条弹幕的高度

    const tpH=60;

    context.font = "30px Arial";

    context.fillStyle = "#00ff00";

    var danmoChi = __data__;

    //当前画布里面存在的弹幕对象

    var viewDanmo = [];

    //通道占用状态数组

    var hasPos = [];

     

    //用来进行随机选择通道的数组

    var possibleArr=[];

     

    for (var i = 1; i < MAX_Channel; i++) {

    hasPos[i] = true;

    }

     

    //用来生成弹幕对象

    function createDanmo(text, channel) {

    this.x = 800;

    //绘制弹幕

    this.draw = function () {

    context.beginPath();

    context.fillText(text, this.x, tpH * channel);

    context.closePath()

    };

    this.move = function () {

    this.x -= 2;

    this.draw();

    }

    }

     

    //检测轨道情况,并在空闲轨道中随机选取一条,没有则返回-1

    function getChannel() {

    possibleArr=[];

    for (var i = 0; i < MAX_Channel; i++) {

    if (hasPos[i]) {

    possibleArr.push(i)

    }

    }

     

    if(possibleArr.length>0){

    var len=possibleArr.length;

    if(len==1){

    return possibleArr[len-1]

    }

    else {

    var t=Math.floor(Math.random()*len);

    return possibleArr[t]

    }

    }

    else {

    return -1

    }

     

     

    }

    //取出弹幕并发送

     

    function start() {

    timer = setInterval(function () {

    if (danmoChi.length > 0 && getChannel() != -1) {

    var dammo = danmoChi.shift();

    var channel = getChannel();

    hasPos[channel] = false;

    var obj = new createDanmo(dammo.content, channel);

    obj.draw();

    obj.channel = channel;

    viewDanmo.push(obj);

    setTimeout(function () {

    hasPos[channel] = true;

    }, dammo.content.length * 60 + 1000);

    dammoMove(obj, channel);

    }

     

     

    }, popSpeed);

    }

    start();

    //使用定时器实现弹幕每次的运动重绘

    function dammoMove() {

    if (tms) {

    clearInterval(tms);

    }

     

    tms = setInterval(function () {

    if(viewDanmo.length<1){

    clearInterval(tms);

    tms=null;

    return

    }

    context.clearRect(0, 0, W, H);

    for (var i = 0; i < viewDanmo.length; i++) {

    viewDanmo[i].move();

    //弹幕以及完全移出可视区,删除此弹幕对象

    if(viewDanmo[i].x<-700){

    viewDanmo.splice(i,1)

    }

    }

    }, moveSpeed)

    }

    //添加弹幕,将信息存入弹幕池

    function tianjiaDanmo() {

    var val = document.getElementById('ctx').value;

     

    if (val.trim()) {

    var obj = {};

    obj.img = "";

    obj.content = val;

    danmoChi.push(obj);

    document.getElementById('ctx').value="";

    console.log('发送弹幕成功!');

    // start();

    }

    }

    function sendDanmo(e) {

    let event = e || window.event;

    if (event.code == 'Enter') {

    tianjiaDanmo();

    }

    }

     

    </script>

     

    效果:

    分析:当弹幕数量较多时,有一定的优势

    缺点,原生的定时器实现运动可能会很僵硬,可以借助js动画库

     

     

     

     

     

    展开全文
  • OpenDanmaku是Android中目前非常流行的第三方弹幕控件,可以实现在播放视频、直播和评论模块中弹出用户的实时评论,并且以滚动的方式显示。该框架非常适合应用在商城、音乐播放和新闻类软件中的评论功能模块。 项目...

    简介

    OpenDanmaku是Android中目前非常流行的第三方弹幕控件,可以实现在播放视频、直播和评论模块中弹出用户的实时评论,并且以滚动的方式显示。该框架非常适合应用在商城、音乐播放和新闻类软件中的评论功能模块。

    项目地址

    https://github.com/linsea/OpenDanmaku 

    效果演示

    使用方法

    1.在build.gradle添加module

    implementation project(':opendanmaku')

    在官方的项目中,是在build.gradle中添加依赖

    dependencies {
        compile 'com.linsea:opendanmaku:1.0.0@aar'
     }

    2.在布局文件中加入自定义的弹幕View

    <com.opendanmaku.DanmakuView
                android:id="@+id/danmakuView"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                app:end_Y_offset="0.8"
                app:max_row="4"
                app:max_running_per_row="2"
                app:pick_interval="1000"
                app:show_debug="false"
                app:start_Y_offset="0.2" />

    DanmakuView的自定义属性

     * start_Y_offset

    第一条播放航道距离弹幕View上边缘的偏移量,注意值是百分比量,以弹幕View的高度为基准,简而言之就是弹幕View的上边缘空出多少百分比.

     * end_Y_offset

    与上一个属性类似,最后一条播放航道距离弹幕View上边缘的偏移量,注意值是百分比量,以弹幕View的高度为基准,主要作用是便于在弹幕View的底部留出一定的空白.

     * max_row

    设置最多多少条播放航道.

     * max_running_per_row

    每条航道上最多同时有多少条弹幕运行.

     * pick_interval 

    每隔多少毫秒取出一条弹幕来播放.

     * show_debug 

    是否显示航道线及播放帧率,调试时很有用,主要用于调试.

    3.在代码中引入OpenDanmaku

     /**
         * 构建弹幕的数据集合
         * @return
         */
        private List<IDanmakuItem> initItems() {
            List<IDanmakuItem> list = new ArrayList<>();
            //创建100条文本的弹幕
            for (int i = 0; i < 100; i++) {
                IDanmakuItem item = new DanmakuItem(this, i + " : plain text danmuku", mDanmakuView.getWidth());
                list.add(item);
            }
            //创建100条文本带图片的弹幕
            String msg = " : text with image   ";
            for (int i = 0; i < 100; i++) {
                ImageSpan imageSpan = new ImageSpan(this, R.drawable.em);
                SpannableString spannableString = new SpannableString(i + msg);
                spannableString.setSpan(imageSpan, spannableString.length() - 2, spannableString.length() - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                IDanmakuItem item = new DanmakuItem(this, spannableString, mDanmakuView.getWidth(), 0, 0, 0, 1.5f);
                list.add(item);
            }
            return list;
        }
    
      //添加到弹幕控件里面
            mDanmakuView.addItem(list, true);

    这样基本就实现了在播放视频的时候弹幕的滚动以及发送弹幕。如果有需要代码的话,可以去我的csdn或者是github上进行下载。

    下载

    CSDN:https://download.csdn.net/download/wen_haha/10861562

    Github:https://github.com/kongkongdaren/OpenDanmakuDemo

     

    展开全文
  • 直播项目---弹幕问题

    2019-03-06 01:45:46
    大量弹幕情况利用重用池解决内存飙升问题,进行性能优化我这个是把弹幕轨道写死的,放弹幕的时候判断一下那个轨道的弹幕X坐标比较小,就在那个轨道上面放弹幕。 先看一个图,理一下思路。红色位置开始,蓝色位置...

    抽空来总结一下前段时间搞的直播中弹幕问题。有1.弹幕移动的移速问题   2.弹幕移动重叠问题的解决  3.大量弹幕情况利用重用池解决内存飙升问题,进行性能优化  

    我这个是把弹幕轨道写死的,放弹幕的时候判断一下那个轨道的弹幕X坐标比较小,就在那个轨道上面放弹幕。



    先看一个图,理一下思路。红色位置开始,蓝色位置结束。一共是KscreenWith+LabWith的路程,设定一个写死的速度,那么生命周期就确定了。

    创建2个数组,一个作为弹幕的数据源,一个作为弹幕的重用池。

    1.自定义一个方法,判断重用池里面有没有lab,有的话就用,然后从数据源取值。没有的话就创建lab,从数据源取值。



    我这个没有给view赋值,可以自己写一个。取数据后从数据源中remove掉这个弹幕model,开始uiview动画从右到左,判断当到了蓝色的位置就把这个lab放到重用池里面。

    2.解决重叠问题

    放弹幕之前使用gcd做一个延迟处理


    可以设置一个最小间距时间座位延迟处理。

    展开全文
  • 笔者简书:https://www.jianshu.com/u/8ba7c349861d, 欢迎大家关注 ... 公众号:君伟说 十一假期学习撸了一个小程序,欢迎各位朋友进行关注,代码已经在gitHub上开源: ...react-native-extra-dimensi...

    笔者简书:https://www.jianshu.com/u/8ba7c349861d, 欢迎大家关注

    笔者个人网站:https://wayne214.github.io/

    公众号:君伟说

     

    觉得文章不错的,给我点个赞哇,关注一下呗!
    技术交流可关注微信公众号【君伟说】,加我好友一起探讨
    微信交流群:加好友(备注技术交流)邀你入群,抱团学习共进步

    公众号

     

    2020.5.28更新

    列表item加载中动画效果

    React Native Content Loader

     

     

    十一假期学习撸了一个小程序,欢迎各位朋友进行关注,代码已经在gitHub上开源:

    清风天气

     

    清风天气

    2020.3.24更新:

    一个React Native模块,允许您使用默认应用程序在设备上打开文件(mp3,mp4,pdf,word,excel,dwg等)

    react-native-file-opener

    react-native-open-file
     

    react-native-doc-viewer

    react-native-file-viewer

     

     

    2019.11.11更新:

    react-native-extra-dimensions-android

    获取Android手机屏幕正式高度,宽度,解决ReactNative中这个问题const {height, width} = Dimensions.get('window'); 获取的高度不包含statusbar 和 bottomNavigationBar高度,错误

    2019.9.27更新:

    美团技术团队开源的ReactNative组件库--beeshell 升级2.0版本了

    beeshell

     

    2019.8.23更新

    Access additional display metrics on Android devices: status bar height, soft menu bar height, real screen size

    react-native-extra-dimensions-android

     

    2019.4.17更新:

    动画库:

    react-native-pose

    2019.4.12更新:

    时间轴,快递流程图效果

    https://github.com/24ark/react-native-step-indicator

    https://github.com/thegamenicorus/react-native-timeline-listview

     

    2019.4.8更新:

    react-native 表格组件

    react-native-table-component

    使用:https://blog.csdn.net/weixin_44187730/article/details/86487845

    react-native-data-table

    使用:https://www.jianshu.com/p/6ab2a96a9f1a

    2019.2.27更新

    A polyfill library for Alert.prompt on Android platform, working both on Android and iOS platform

    react-native-prompt-android

    React Native 第三方组件之--UI类 https://www.jianshu.com/p/c7a8f115dca0

    聊天UI

    下面这种情况建议选择aurora-imui-react-native

    对性能要求较高(低能耗)

    需要处理大量聊天消息(群聊)

    对媒体消息要求较高(图片、表情、视频)

    下面这种情况建议选择react-native-gifted-chat

    对自定义要求比较高,aurora-imui-react-native 提供的配置项无法满足界面需求的时候。

    不需要处理大量消息。

    业务只需要处理文本消息。

    引自:如何构建你的聊天界面 https://www.jianshu.com/p/79163c6f73f7

    2019.2.20更新

    ReactNative安装apk(Android only)

    react-native-apk-install

    2019.1.30更新:

    react native 调用手机内置地图:

    GitHub:https://github.com/starlight36/react-native-map-linking

    React Native多功能选择页面

    https://github.com/gaoxiaosong/react-native-picklist

    2019.1.21更新

    react-native-speech-iflytek 是一个 React Native 下的科大讯飞语音库,可以进行语音识别与语音合成。

    聊天UI

    下面这种情况建议选择aurora-imui-react-native

    对性能要求较高(低能耗)

    需要处理大量聊天消息(群聊)

    对媒体消息要求较高(图片、表情、视频)

    下面这种情况建议选择react-native-gifted-chat

    对自定义要求比较高,aurora-imui-react-native 提供的配置项无法满足界面需求的时候。

    不需要处理大量消息。

    业务只需要处理文本消息。

    引自:如何构建你的聊天界面 https://www.jianshu.com/p/79163c6f73f7

    2019.2.20更新

    ReactNative安装apk(Android only)

    react-native-apk-install

     

    2019.1.30更新:

    React Native多功能选择页面

    https://github.com/gaoxiaosong/react-native-picklist

     

    2019.1.21更新

    react-native-speech-iflytek 是一个 React Native 下的科大讯飞语音库,可以进行语音识别与语音合成。

     

     

    2018.12.29更新:

    应简书网友:RNAmateur的请求,更新如下两个

    React Native中自定义导航条

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

    React Native中事件监听和持久化存储的结构化设计

    https://www.jianshu.com/p/43c2f39992b4

     

    2018.12.4更新:

    webview即将从rnCore中移除,使用react-native-webview进行代替

    https://github.com/react-native-community/react-native-webview

    2018.11.26更新:

    跨平台的webview处理:

    https://github.com/wayne214/react-native-webview-crossplatform

     

    2018.11.8更新:

    ReactNativeCookies处理

    react-native-cookies

     

    react-native常用插件总结

    2018.11.7更新:

    适配IPhoneX,IPhone XS, IPhone XR, IPhone XS Max, 刘海屏

    react-native-safe-area-view

    2018.11.1更新:

    应简书小伙伴“RNAmateur”的要求,将其封装的组件更新至此,感谢支持

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

    https://www.jianshu.com/p/43c2f39992b4

     

    2018.10.24更新:

    UI组件库:

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

    2018.10.10更新:

    格式化输入框textInput:

    https://github.com/react-native-community/react-native-text-input-mask

     

     

    2018.10.8更新:

    美团开源的ReactNative库,做了Android和IOS两端的统一,其设计思想值得大家学习一下

    https://juejin.im/entry/5bb027a2e51d450e7a2502ab

    https://github.com/meituan/beeshell

     

    2018.9.25更新:

    react-native使用蚂蚁金服的antd-mobile组件库教程

    https://www.jianshu.com/p/029b6c6b5047

    https://rn.mobile.ant.design/index-cn

     

    2018.9.20更新:

    https://github.com/879479119/react-native-shadow 设置Android的阴影显示

    https://github.com/songxiaoliang/react-native-feedback 用户反馈

    2018.9.7更新:

    添加事件到日历:

    https://github.com/vonovak/react-native-add-calendar-event

    2018.8.23更新:

    动态修改Android的softmodule:

    react-native-android-keyboard-adjust

     

     

    2018.8.9更新:

    资源列表:https://github.com/reactnativecn/react-native-guide

    https://js.coach/

     

    2018.7.31更新:

    推荐一个不错的React Native 组件和库的资源列表:

    https://reactnativeexample.com/

    2018.7.27更新:

    几个UI组件库:

    react-native-elements

    NativeBase

    react-native-ui-lib

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

    https://segmentfault.com/a/1190000010875332

     

    React Native UI 组件库, 超过 20 个纯 JS(ES6) 组件, 专注于内容展示和操作控制。

    https://github.com/rilyu/teaset/blob/HEAD/docs/cn/README.md

     

    2018.7.18更新:

    前辈整理的第三方:

    [https://www.jianshu.com/p/bb5f68a236d3]https://www.jianshu.com/p/bb5f68a236d3

    升级版的webview用于安卓平台:react-native-webview-android

     

    和listview搭配可以进行 内容从底部开始进行渲染

    react-native-invertible-scroll-view

    2018.7.5更新:

    网格布局:

    https://www.npmjs.com/package/react-native-gridview

    性能优化的可拖动排序的标签组件react-native-drag-to-sort-tags

    https://github.com/bolan9999/react-native-drag-to-sort-tags

     

     

     

    2018.6.26更新:

    网络请求框架:https://github.com/niftylettuce/frisbee

    http://www.hangge.com/blog/cache/detail_1622.html

    https://github.com/visionmedia/superagent/

     

    2018.6.20更新:

    一个IOS样式的跨平台(cross-platform)平台的switch组件

    https://github.com/react-native-studio/react-native-switchbutton

    基于android SmartRefreshLayout https://github.com/scwang90/SmartRefreshLayout 开发的插件,可提供类似ios的弹性刷新

    https://github.com/react-native-studio/react-native-SmartRefreshLayout

     

    2018.6.8更新:

    跨平台数据库开发组件:

    https://github.com/andpor/react-native-sqlite-storage

    生成二维码:

    https://github.com/cssivision/react-native-qrcode

    生成各类图表:

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

    https://github.com/wuxudong/react-native-charts-wrapper

    https://github.com/capitalone/react-native-pathjs-charts

    基于 React Native 实现的支付宝钱包 UI 界面:

    https://github.com/superRaytin/react-native-alipay

    集成微信功能:

    https://github.com/yorkie/react-native-wechat

    对ListView/FlatList的封装,可以很方便的分页加载网络数据,还支持自定义下拉刷新View和上拉加载更多的View

    https://github.com/geek-prince/react-native-page-listview

    时间选择框

    https://github.com/xgfe/react-native-datepicker

     

    2018.6.7更新:

    悬浮效果的按钮:

    https://github.com/mastermoo/react-native-action-button

     

    下拉框控件react-native-modal-dropdown

    https://github.com/sohobloo/react-native-modal-dropdown

     

    跨三端开发模块(Android/Ios/Web)+ 状态管理框架dva

    https://github.com/blankapp/react-native-template-ui-based

     

    2018.5.30更新:

    react-native 身份证扫描(Android版)

    https://www.npmjs.com/package/react-native-scanidcard

    2018.5.11更新:

    加载多张图片,并添加缓存,快速浏览:react-native-fast-image:

    https://github.com/DylanVann/react-native-fast-image

    React Native SSH SFTP 组件:

    https://www.jianshu.com/p/504a4b3ec34d

    React Native使用百度Echarts显示图表:

    https://www.jianshu.com/p/68cd9af0bff4

    2018.5.10更新:

     

    基于ART的SVG库:https://github.com/react-native-community/react-native-svg

     

    2018.4.19更新:

    2018 年 2 月 15 个有意思的 JavaScript 和 CSS 库:

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

    react-native-pull-refresh-view:适配Android和Ios

    https://github.com/reactnativecomponent/react-native-pull-refresh-view

     

    react-native适配iPhoneX 目前最简单的方法:

    http://bbs.reactnative.cn/topic/5418/react-native%E9%80%82%E9%85%8Diphonex-%E7%9B%AE%E5%89%8D%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%96%B9%E6%B3%95

    一个ReactNative仿网易新闻的Demo:

    https://github.com/h406621397/NeteaseNews

    React Native如何使用自定义的iconfront:

    https://juejin.im/post/5ac80a265188255569193bb0

     

     

    2018.4.8更新:

    高德地图插件: https://gitee.com/1148030615/rn-AmapLocation

    脚手架:https://github.com/Murrayee/murray

     

    2018.3.6更新:

    React Native开发实用技巧

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

     

    最灵活的UI控件库:React Native UI Lib

    https://www.jianshu.com/p/c2771ff962a4?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo

     

    一个android弹幕插件

    https://github.com/react-native-studio/react-native-android-danmaku

     

    react-native-baidumap-sdk

    与 react-native-amap3d 相似,除此之外还实现了:

    独立定位模块

    地理编码/逆地理编码

    点聚合组件

    Mastering React Native(React Native高级教程电子书)

    PDF版:Mastering React Native

    Word版:Mastering React Native

    https://www.jianshu.com/u/3a2d89402aca

     

     

    2018.2.8更新:

    React Native TTS is a text-to-speech library for React Native on iOS and Android.

    https://github.com/ak1394/react-native-tts

     

    2018.2.1更新:

     

    SuperAgent 是一个流行的第三方 Ajax 库,专注于处理服务端/客户端的 http 请求。

    对比现存的各种请求 API 库,SuperAgent 更加轻量、优雅、易读、易学。

    最重要的是它可以用于 Node.js

    GitHub 主页地址:https://github.com/visionmedia/superagent/

    原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1622.html

     

    2018.1.25更新:

    React Native 截屏组件

    React Native 截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View组件。支持iOS和安卓。

     

    2018.1.5更新

    录音:

    react-native-audio

    https://github.com/jsierles/react-native-audio

    播放:

    react-native-sound

    https://github.com/zmxv/react-native-sound

     

    2018.1.4更新

    进度条

    https://github.com/oblador/react-native-progress

    https://www.jianshu.com/u/c79c9f26d774

     

    2017.12.28更新

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    中文文档:https://www.kancloud.cn/yunye/axios/234845

    英文文档:https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

    使用:https://www.jianshu.com/p/df464b26ae58

     

     

    2017.12.25更新

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    https://www.kancloud.cn/yunye/axios/234845

     

    2017.12.23更新

    react-native-router-flux 路由框架

    react-native-vector-icons 矢量字体库图标

    realm-js realm 数据库

    react-native-i18n 多语言-国际化插件

    react-native-image-viewer 图片预览

    react-native-modalbox 模态框

    react-native-spinkit loading

    react-native-textinput-effects 输入框

    url-parse url解析

     

     

    2017.12.19更新

    react native仿微信性别选择-自定义弹出框

    极客学院:http://wiki.jikexueyuan.com/project/react-native/

     

    2017.12.8更新

    react native 轮播组件:支持循环,横竖轮播,支持卡片样式显示

    https://github.com/easyui/react-native-ezswiper

    基于EZPlayer封装的视频播放器,功能丰富,快速集成,可定制性强的rn组件

    https://github.com/easyui/react-native-ezplayer

     

    2017.12.7更新

    https://github.com/JackPu/react-native-percentage-circle

    2017.11.28更新

    react-native-popup-dialog

    2017.11.23更新

    React Native开源特效动画封装库模块(lottie-react-native)

    开源项目地址:https://github.com/airbnb/lottie-react-native

     

    2017.11.13更新

    react native学习笔记13——FlatList上拉加载

    二维码扫描

    react-native-smart-barcode

     

    2017.10.26更新

    react native 渐变组件 react-native-linear-gradient

    github:  https://github.com/react-native-community/react-native-linear-gradient

    一个图片多选组件 react-native-syan-image-picker

    GitgHub react-native-syan-image-picker

     

     

    2017.10.17更新

    聊天组件

    aurora-imui-react-native

    使用请参考:http://www.jianshu.com/p/3557b55db81c

    2017.10.11更新

    解决键盘遮挡问题

    https://github.com/APSL/react-native-keyboard-aware-scroll-view

    2017.9.28更新

    https://github.com/cheng-kang/react-native-lahk-marquee-label-vertical

    这是一个从下向上滚动的跑马灯。

    如果需要从右往左滚动的跑马灯,请使用react-native-lahk-marquee-label

     

    2017.9.27更新

    react-native-keyboard-aware-scroll-view

    适用于 scrollView、ListView、FlatList、SectionList 上有输入框的问题

    解决键盘挡住输入框问题

    点击按钮让scrollView滚动到指定位置

    http://www.jianshu.com/p/e7f26851b9e8

    2017.9.15 更新

    读取PDF文件

    https://github.com/wonday/react-native-pdf

    语音播报:

    https://github.com/somonus/react-native-speech

     

    2017.9.11 更新

    switch 开关

    https://github.com/shahen94/react-native-switch

    IOS和Android白屏

    react-native-splash-screen

    侧滑栏

    https://github.com/root-two/react-native-drawer

    带索引的分类列表,通讯录,省市地址等

    https://github.com/rgovindji/react-native-atoz-list

     

    react-native之站在巨人的肩膀上

    http://www.cnblogs.com/skylor/p/5783824.html

     

    2017.8.29 更新

    React Native 【 第三方分享 】、【 第三方登录 】. 支持平台:QQ、QQ空间、微信、朋友圈、新浪微博、FaceBook... 【 Android、 IOS 双平台 】

    项目地址:https://github.com/songxiaoliang/react-native-share

    使用:http://blog.csdn.net/u013718120/article/details/75040805

    2017.8.22  更新

    基于FlatList的下拉、上拉刷新组件

    react-native-refresh-list-view

    倒计时组件

    https://github.com/ljunb/rn-countdown

    react-native-agora 基于Agora(YY技术团队)直播,视频会议组件

    https://github.com/DBshaoYan/react-native-agora

     

    相关资源文章

    https://yq.aliyun.com/articles/78154?t=t1

    http://www.jianshu.com/p/53ff78168acc

    少停的博客分享

     

     

    扫描二维码

    https://github.com/MarnoDev/AC-QRCode-RN

    复选按钮--checkbox

    https://github.com/crazycodeboy/react-native-check-box

    单选按钮-radioButton

    https://github.com/wayne214/react-native-flexi-radio-button

    http://makaidong.com/sinat_17775997/1/322_11689039.html

    持久化存储

    https://github.com/almost/react-native-sqlite

    https://realm.io/docs/react-native/latest/

     

    获取权限

    https://github.com/yonahforst/react-native-permissions

    文件上传

    https://github.com/eduedix/react-native-networking

    拍照:

    https://github.com/remobile/react-native-camera

    视频录制:

    https://github.com/phuochau/react-native-beautiful-video-recorder

    react-native-camera是一个第三方的开源库,我们可以通过它来调用设备的摄像头,

    从而实现拍照、或者录像功能。

    react-native-camera功能强大,我们可以选择使用哪个摄像头、是拍照还是录像、是否录制声音、是否开启闪光灯、视图比例、拍摄质量、拍摄方向、触摸功能、条形码/二维码扫描等等。

    GitHub主页地址:https://github.com/lwansbrough/react-native-camera

     

    一个功能完善的 react-native 高德地图组件:

    https://github.com/qiuxiang/react-native-amap3d

    React Native中的懒加载(lazyload)

    https://github.com/magicismight/react-native-lazyload

    图片缓存方案:

    https://github.com/wcandillon/react-native-img-cache

    https://github.com/remobile/react-native-cache-image

     

    https://github.com/MarnoDev/react-native-open-project

    手势缩放图片:

    https://github.com/ldn0x7dc/react-native-transformable-image

    弹框-全遮盖的弹出层

    react-native-modalbox

    诸多reactNative第三方控件,助大家一臂之力

    https://js.coach/react-native

    IOS or Android白屏问题

    react-native-splash-screen

     

    Toast吐司:

    https://github.com/remobile/react-native-toast

    https://github.com/crazycodeboy/react-native-easy-toast

    https://github.com/RazerTang/react-native-root-toast2

     

    日历控件:

    https://github.com/airbnb/react-dates

    https://github.com/wix/react-native-calendars/blob/master/README.md

    https://www.npmjs.com/package/react-native-calendars

     

    加解密库:

    crypto-js

     

    时间选择器

    react-native-picker

    https://github.com/beefe/react-native-picker

    坐标转换

    以后处理坐标转换可能会用到的,用到的时候再看https://github.com/wandergis/coordtransform

    Button按钮

    简单的按钮控件

    https://github.com/APSL/react-native-button

     

     

    react-native-speech

    语音播报组件

    react-native-snap-carousel

    简单的轮播框组件,带有断裂效果,应用于Android和iOS

    调用系统的电话、短信、邮件、浏览器:

    三方组件:react-native-communications

    地址:https://github.com/anarchicknight/react-native-communications

    网址里面的 README.md 写的非常的清楚,而且还有例子可供参考,相当方便,iOS和Android亲测没有问题

    强烈推荐大家看一下

     

     

    轮播图:npm install react-native-swiper--save

    倒计时:npm install react-native-sk-countdown --save

    React Native 项目常用第三方组件汇总:

    react-native-uploader //文件上传

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

    0.gif

    jpush-react-native //官方版本

    https://github.com/jpush/jpush-react-native

    react-native-jpush 由 React Native 中文网开发维护。

    https://github.com/reactnativecn/react-native-jpush

    pouchdb-react-native pouchdb插件

    react-native-animatable 动画

    react-native-carousel 轮播

    react-native-countdown 倒计时

    https://github.com/jackuhan/react-native-CountDowntimer 倒计时

    react-native-device-info 设备信息

    react-native-fileupload 文件上传

    react-native-icons 图标

    https://github.com/oblador/react-native-vector-icons 图标

    react-native-image-crop-picker 图片选择器

    react-native-image-picker 图片选择器

    关于图片选择器的配置:http://www.cnblogs.com/shaoting/p/6148085.html

    react-native-keychain iOS KeyChain管理

    react-native-picker滚轮选择器:react-native-picker

    react-native-picker-Android Android 滚轮选择器

    react-native-refreshable-listview 可刷新列表

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

    react-native-side-menu 侧栏

    react-native-swiper 轮播

    react-native-video 视频播放

    react-native-viewpager 分页浏览

    react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架

    react-native-tab-navigator 底部或上部导航框架(不可滑动)

    react-native-check-box CheckBox

     

    react-native-splash-screen 启动白屏问题

    react-native-simple-router 简易路由跳转框架

    react-native-storage 持久化存储

    react-native-sortable-listview 分类ListView

    react-native-htmlview 将 HTML 目录作为本地视图的控件,其风格可以定制

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

    选项卡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/lovebing/react-native-baidu-map

    动画

    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

    日历弹出@IOS和Android

    https://github.com/wayne214/react-native-modal-datetime-picker

    语言转化和一些常用格式转换

    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/rebeccahughes/react-native-device-info

    手势放大缩小移动

    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/wayne214/react-native-swRefresh

    下拉选择

    https://github.com/alinz/react-native-dropdown

    https://github.com/WheelerLee/react-native-dropdown-menu

    图片查看

    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

    工程目录下终端输入 npm i XXX save

    http://www.jianshu.com/p/e3ee0ab1eb82

     

    react native仿微信性别选择-自定义弹出框

     

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

     

    react-native-progress

     

    react-native-baidumap-sdk

    与 react-native-amap3d 相似,除此之外还实现了:

    独立定位模块

    地理编码/逆地理编码

    点聚合组件

     

    最灵活的UI控件库:React Native UI Lib

     

    React Native开发实用技巧

     

     https://gitee.com/1148030615/rn-AmapLocation

     

    https://github.com/easyui/react-native-ezswiper

     

    展开全文
  • 原创 2016-10-18 郭霖 郭霖 郭霖 郭霖 微信号 guolin_blog 功能介绍 Android技术分享平台,每天都有优质技术文章推送...10月17日上午7点30分,神舟十一号于酒泉卫星发射中心顺利发射,航天员由景海鹏
  • 声明:本文来自「七牛云主办的架构师实践日——亿级移动应用架构最佳实践」的演讲内容整理。PPT、速记和现场演讲视频等参见“七牛架构师实践日”官网。 嘉宾:卜赫,七牛云布道师。 责编:钱曙光,关注架构和...
  • React Native:面向切面编程 &amp;&amp; JavaScript ES7修饰符 在编译期、类加载期、运行时,动态地将代码切入到类的指定方法、指定位置上的编程思想就是面向切面的编程。AOP其实只是OOP的补充而已。OOP从...
  • https://github.com/Bilibili/DanmakuFlameMaster 转载于:https://www.cnblogs.com/zhaoleigege/p/5601094.html
  • React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX...
  • ReactNative是Facebook开源的一种实现移动跨平台开发的解决方案,目前在业界得到广泛应用,这里有非常详细的中文使用指南。本文主要分享RN源码中一些值得大家学习或者借鉴的代码或者编写技巧等,供大家学习参考。 ...
  • 声明:本文来自「七牛云主办的架构师实践日——泛娱乐+直播技术最佳实践」的演讲内容整理。PPT、速记和现场演讲视频等参见“七牛架构师实践日”官网。 嘉宾:刘丁,bilibili 架构师。 责编:钱曙光,关注架构和...
  • React Native之hellWord

    2016-08-23 19:53:56
    初始化项目工程 进入自己的工作空间然后shift+鼠标右键打开命令行窗口执行如下命令创建RN工程HelloWorld: ...然后使用Android Studio打开AVD Manager创建模拟器,在打开Android Studio的时候会提示创建Android...
  • React-Native 动画优化

    2019-07-12 20:34:12
    React-Native由于渲染模式的不同,无法使用CSS样式的方式优化。 React-Native的实现 React-Native在动画方面有两个主要方式,一个是Animated,一个是LayoutAnimation。 Animated Animated动...
  • ReactNative(二)——HelloWorld http://blog.csdn.net/gz_jero/article/details/51503028 标签: webstormReactAndroid 2016-05-25 23:28 818人阅读 评论(0) 收藏 举报  分类: ...
  • 微信小程序,使用 scroll-view 标签,实现文字水平方向(从左至右)跑马灯效果,目前暂无大BUG,已使用。 完整代码 //xml代码 scroll-view class="example"> view class="marquee_box"> view class="marquee_...
  • React Native 项目常用第三方组件汇总: &amp;nbsp; react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-...
1 2 3 4 5 ... 20
收藏数 447
精华内容 178
关键字:

native react 弹幕