2017-02-28 14:47:26 qq_33023933 阅读数 775
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

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的最初的意图,

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
















2018-06-21 18:38:48 potato512 阅读数 4095
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

学习交流:https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群:806870562


效果图


代码示例

import React from 'react';
import {View, Text, Button, Alert, AlertIOS} from "react-native";

const title = "温馨提示";
const message = '要下雨了,记得带伞'

export default class AlertPage extends React.Component {

  constructor(props) {
      super(props);
      _this = this;
      this.state = {
          inputText:'',
      };
  }

   render(){
     return(
       <View style={{marginTop:60, alignItems:"center"}}>
         <Text>Alert的使用</Text>
         <Button title="标题+确定" onPress={() => {
           Alert.alert(title)
         }}/>
         <Button title="标题+内容+确定" onPress={() => {
           Alert.alert(title,message)
         }}/>
         <Button title="标题+内容+取消+确定" onPress={() => {
           Alert.alert(
            title,
            message,
            [
              {text: '不带伞', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
              {text: '知道了', onPress: () => console.log('OK Pressed')},
            ],
          )
         }}/>
         <Button title="标题+内容+多按钮" onPress={() => {
           Alert.alert(
            title,
            message,
            [
              {text: '不带伞', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
              {text: '知道了', onPress: () => console.log('OK Pressed')},
              {text: '有人送伞', onPress: () => console.log('送伞')},
            ],
            {
              cancelable: true,
              onDismiss: () => {
                ToastAndroid.show('点击了外面', ToastAndroid.SHORT)
              }
            }
          )
         }}/>
         <Button title="iOS" onPress={() => {
           AlertIOS.alert(
             title,
             message,
             [
               {text: '取消',onPress: function() {console.log('取消按钮点击');}},
               {text: '确认',onPress: function() {console.log('确认按钮点击');}},
             ]
           )
         }}/>
         <Button title="iOS+输入框" onPress={() => {
           AlertIOS.prompt(
             title,
             message,
             [
               {text: '取消',onPress: function() {console.log('取消按钮点击');}},
               {text: '确认',onPress: (text) => {
                 _this.setState({inputText:text})
                 console.log('你输入了: ' + _this.state.inputText)
               }},
             ],
             'secure-text',
             this.state.inputText,
             'number-pad'
           )
         }}/>

)

       </View>
     )
   }
}



2019-02-23 16:49:37 baidu_39503346 阅读数 166
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

React Native是React在移动端的跨平台方案 ,开启了开发原生App的新方式。学习React Native需要熟悉React。

React Native是基于React设计的。其官网的介绍是使用React构建Native应用框架,它采用的语法也是React。

需要安装软件

Node.js和npm、React Native(react-native-cli)、NVM(Node.js Version Manager,来管理Node.js版本) 

创建项目:

react-native init "project name"

React:提出的是一个新的开发模式和理念,他强调的是“用户界面”。

React三个特点

作为UI(Just the UI):React可以只作为视图(View)在MVC中使用。

虚拟DOM(Virtual DOM):可以很好的优化视图的渲染和刷新,它是React的一个亮点,也是重要的一个特性。、

数据流(Data Flow):React实现了单向的数据流,并且在数据绑定上更加灵活、便捷。

React学习需要的知识

JSX语法知识:JSX的官方解释是其语法类似于XML,而HTML是XML的子集。

ES6相关知识:因为ES6增加了很多语法特性和新功能,使用它可以进行快速的功能开发。

前端基础知识:最基础的要求需要具备基本的前端知识,CSS和JavaScript比较重要。

React Native开发流程

设计阶段:1、需求分析;2、组件规划

开发阶段:1、入口组件;2、功能入口组件;3、功能集合[n](n:可有多个)

打包更新机制:1、代码更新:a、本地存储,b、远程拉取,c、版本管理;2、自动打包

React Native引进原因

为了将开发成本和用户体验做到平衡。它的跨平台特性和使用JavaScript作为开发语言广受欢迎。它不仅可以使用前端开发模式来开发应用,还能调用原生的UI组件和API。它兼顾了开发效率,提高了用户体验。

React Native学习地址

React Native官网:http://facebook.github.io/react-native/

React Native版本发布:http://github.com/facebook/react-native/releases

React Native Github地址:http://github.com/facebook/react-native

疑难问题搜索:https://github.com/facebook/react-native/issues

 

2017-09-07 10:33:46 u011094768 阅读数 1824
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

react-native react-native-swiper 设置horizontal=false后界面依然横向滑动,
主要是对布局进行了旋转操作

export  default class TestSwiper extends Component {
    render(){
        return (
            <View style={styles.containerStyle}>
                <Swiper
                    showsPagination={false}
                    autoplay
                >
                    <Text style={[{backgroundColor:"#f0f"},styles.pageStyle]}>界面1</Text>
                    <Text style={[{backgroundColor:"#ff0"},styles.pageStyle]}>界面2</Text>
                    <Text style={[{backgroundColor:"#00f"},styles.pageStyle]}>界面3</Text>
                </Swiper>
            </View>
        )
    }
}
const styles=StyleSheet.create({
    containerStyle:{
        backgroundColor:"#000",
        //旋转90度
        transform:[{rotate: "90deg"}],
        height:100,
        width:100,
    },
    pageStyle:{
        height:100,
        width:100,
        //旋转-90度
        transform:[{rotate: "-90deg"}]
    }
})

这里写图片描述

2019-08-23 15:27:57 weixin_39330484 阅读数 61
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

react-native 自定义弹框

安装- react-native-root-siblings https://www.npmjs.com/package/react-native-root-siblings

 npm install react-native-root-siblings --save

可以作为公共通用方法:

import React, { Component } from 'react'
import { View, StyleSheet, ActivityIndicator, Dimensions, TouchableOpacity, Text } from 'react-native'
import RootSiblings from 'react-native-root-siblings';
const { width, height } = Dimensions.get('window');

let sibling = undefined
const AlertUtil = {
	show: (title, subTitle, cancelAction, confirmAction) => {
		sibling = new RootSiblings(
			<View style={styles.maskStyle}>
				<View style={styles.backViewStyle}>
					<View style={{ height: 25 }} />
					<Text style={styles.titleLbl}>{title}</Text>
					<View style={{ height: 10 }} />			
					<View>{subTitle}</View>
					<View style={{ height: 14 }} />
					<View style={styles.seperatorLine} />
					<View style={{ flexDirection: 'row' }}>
						<TouchableOpacity style={styles.touchView} onPress={cancelAction}>
							<Text style={styles.cancelBtn}>取消</Text> //此处可以自定义 话术
						</TouchableOpacity>
						<View style={styles.widthSeperatorLine} />
						<TouchableOpacity style={styles.touchView} onPress={confirmAction}>
							<Text style={styles.confirmBtn}>确定</Text> //此处可以自定义 话术
						</TouchableOpacity>
					</View>
				</View>
			</View>
		)
	},

	hidden: () => {
		if (sibling instanceof RootSiblings) {
			sibling.destroy()
		}
	}
}

const styles = StyleSheet.create({
	maskStyle: {
		position: 'absolute',
		backgroundColor: 'rgba(33, 33, 33, 0.5)',
		width: width,
		height: height,
		alignItems: 'center',
		justifyContent: 'center'
	},
	backViewStyle: {
		backgroundColor: '#fff',
		width: 280,
		alignItems: 'center',
		borderRadius: 5,
	},

	seperatorLine: {
		height: 1,
		width: 280,
		backgroundColor: 'rgba(216,216,216,0.4)',
	},
	widthSeperatorLine: {
		width: 1,
		backgroundColor: 'rgba(216,216,216,0.4)',
	},

	titleLbl: {
		fontSize: 14,
		color: '#666'
	},
	subTitleLbl: {
		fontSize: 15,
		color: '#888888'
	},
	cancelBtn: {
		color: '#FD5208',
		fontSize: 18,
	},
	confirmBtn: {
		color: '#08B2FD',
		fontSize: 18,
	},
	touchView: {
		justifyContent: 'center',
		width: 140,
		height: 50,
		alignItems: 'center',
	},
})

export { AlertUtil }

引用:

import { AlertUtil } from '../../utils/AlertUtil';


remark() {
	AlertUtil.show('弹框标题',
		<View><Text>{'可以自行设置话术'}</Text></View>,
		() => { AlertUtil.hidden()
				// 确定的操作
		 },
		() => {
			AlertUtil.hidden()
			//取消的操作
	})
}

render() {
	return (
		<TouchableOpacity onPress={this.remark.bind(this)}><Text>点我</Text></TouchableOpacity>
	)
}



React Native react-native init fail

博文 来自: cfhgcvb

React Native入门

阅读数 19

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