Allen 专栏-移动互联网

Android 8 标签

Android 开发中的日常积累 有更新!

Android 开发中的日常积累

Android 性能优化

Android 加固与反编译

Android Studio专题

Android 开发中值得看的优秀内容和工具

Android 开源软件

Android 开发辅助工具

Android 推送(含IM)

Android后端等服务

Android 应用内测平台

Android社会化分享,短信验证,意见反馈,支付等相关

安卓网络层(包含图片)

安卓orm框架,用得比较多的就GreenDao,Ormlite

安卓Json解析

Android插件化开发与动态加载

Android 热更新

### Material Design专题
- MaterialShadows 图标阴影虚化

RecyclerView优秀库

安卓开发值得关注的库

iOS 值得关注的库

-iOS图像识别

Gradle插件相关

Kotlin专题

安卓资源相关

git

Android NoSql

设计网站,可以寻找一些酷炫的设计稿

国外个人博客

国外的一些优秀网站

Ibeacon与蓝牙4.0相关

WEB相关

Android 进程保活

前端相关

其他

ReactNative 专题

更新日志

  • 2017/6/30 android 获取帧率fps
  • 2017/6/26 添加iOS图像识别库 ,android 防截屏思路
  • 2017/6/23 添加Collect.js 库
  • 2017/6/19 添加node.js版的htp-server 一行代码实现文件服务器
  • 2017/6/12 添加Android引导页(AppIntro),View提示View (ViewTooltip)
  • 2017/6/6 添加Android WebView框架,遮罩式的导航页
  • 2017/6/5 添加Android Hook框架(Legend)

License

Copyright 2016 AllenCoder

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Mac下Android studio 之NDK配置教程(一)

#Mac下Android studio 之NDK配置教程(一)

##1.概述

     最近项目全线转移到Mac下使用使用Android studio开发。遇到关键代码封装到 ***native***层,此时在win下的NDK配置步骤全部失效。
    为此,花费了大量时间用来查阅资料,在此,记录下来,分享给大家供以后配置中作为参考。

##2.环境

本人使用的开发配置 是:MAC OS 10.10 +androioid studio 1.2+android-ndk-r10e-darwin-x86_64+git 。其他配置类似操作即可。

##3.操作流程
1.MAC 下打开终端 获取NDK目录的权限

chmod a+x android-ndk-r10c-darwin-x86_64.bin
后面为文件存放路径 。


2.cd 路径。
cd 路径。
如果不知道文件的具体路径,可以直接拖拽到命令终端窗口下即可。


3.继续执行解压命令
./android-ndk-r10c-darwin-x86_64.bin


此时在文件存放路径会得到一个解压完成后的NDK存放目录。
效果如下图:

这里写图片描述

得到下图说明:解压文件成功。

此时:打开:命令终端:
这里写图片描述
请按如下步骤操作:

1.输入命令 pico .bash_profile
2. export NDK_ROOT=/Applications/Android-NDK/android-ndk-r10e
3. export PATH=$PATH:$NDK_ROOT
最后保存( control+X) 选 Y
这里写图片描述
4.更新刚配置的环境变量输入source .bash_profile


##验证成功

1.终端下进入
NDK 下的sample 文件夹下

这里写图片描述

按如下步骤测试是否配置成功:
1.cd hello-jni/
2. 执行 ndk-build
这里写图片描述
出现如下界面表示基本变量配置成功。。

我将在教程二继续介绍怎么在Android studio中配置使用的步骤。

android canvas 绘图笔记

android canvas 绘图笔记

1.PathEffect类
画虚线

 Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setStyle(Paint.Style.STROKE);
        p.setColor(Color.WHITE);
        p.setStrokeWidth(1);
        PathEffect effect = new DashPathEffect(new float[]{getDip2px(4), getDip2px(4), getDip2px(4), getDip2px(4)}, 1);
        p.setPathEffect(effect);
        p.setAlpha(125);//透明度50%
        p.setColor(getResources().getColor(R.color.line_chart_dash_line));
        canvas.drawLine(0, ScreenHeight / 2, ScreenWidth, ScreenHeight / 2, p);
        canvas.drawLine(ScreenWidth / 2, 0, ScreenWidth / 2, getBottom() - getDip2px(25), p);

2.android onMeasure

3.android BlurMaskFilter

***Android MaskFilter的基本使用:***

MaskFilter类可以为Paint分配边缘效果。
        对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。Android包含了下面几种MaskFilter:

        BlurMaskFilter   指定了一个模糊的样式和半径来处理Paint的边缘。
        EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。

        要应用一个MaskFilter,可以使用setMaskFilter方法,并传递给它一个MaskFilter对象。下面的例子是对一个已经存在的Paint应用一个EmbossMaskFilter:

Android MaskFilter的基本使用:

MaskFilter类可以为Paint分配边缘效果。
    对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。Android包含了下面几种MaskFilter:

    BlurMaskFilter   指定了一个模糊的样式和半径来处理Paint的边缘。
    EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。

    要应用一个MaskFilter,可以使用setMaskFilter方法,并传递给它一个MaskFilter对象。下面的例子是对一个已经存在的Paint应用一个EmbossMaskFilter:

关于设置硬件加速不能用的方法

LAYER_TYPE_NONE

LAYER_TYPE_SOFTWARE

LAYER_TYPE_HARDWARE

View级别

您可以在运行时用以下的代码关闭单个view的硬件加速:

myView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
注:您不能在view级别开启硬件加速
为什么需要这么多级别的控制?
很明显,硬件加速能够带来性能提升,android为什么要弄出这么多级别的控制,
而不是默认就是全部硬件加速呢?原因是并非所有的2D绘图操作支持硬件加速,
如果您的程序中使用了自定义视图或者绘图调用,程序可能会工作不正常。
如果您的程序中只是用了标准的视图和Drawable,放心大胆的开启硬件加速吧!
具体是哪些绘图操作不支持硬件加速呢?以下是已知不支持硬件加速的绘图操作:

Canvas
clipPath()
clipRegion()
drawPicture()
drawPosText()
drawTextOnPath()
drawVertices()
Paint
setLinearText()
setMaskFilter()
setRasterizer()

另外还有一些绘图操作,开启和不开启硬件加速,效果不一样:

Canvas
clipRect(): XOR, Difference和ReverseDifference裁剪模式被忽略,3D变换将不会应用在裁剪的矩形上。

drawBitmapMesh():colors数组被忽略

drawLines():反锯齿不支持

setDrawFilter():可以设置,但无效果

Paint

setDither(): 忽略
setFilterBitmap():过滤永远开启
setShadowLayer():只能用在文本上
ComposeShader
ComposeShader
只能包含不同类型的shader (比如一个BitmapShader和一个LinearGradient,但不能是两个BitmapShader实例)

ComposeShader不能包含ComposeShader

如果应用程序受到这些影响,您可以在受影响的部分调用setLayerType(View.LAYER_TYPE_SOFTWARE, null),这样在其它地方仍然可以享受硬件加速带来的好处

2.Paint(画笔)类

   要绘制图形,首先得调整画笔,按照自己的开发需要设置画笔的相关属性。Pain类的常用属性设置方法如下:

  setAntiAlias();            //设置画笔的锯齿效果

  setColor();                 //设置画笔的颜色

  setARGB();                 //设置画笔的A、R、G、B值

  setAlpha();                 //设置画笔的Alpha值

  setTextSize();             //设置字体的尺寸

  setStyle();                  //设置画笔的风格(空心或实心)

  setStrokeWidth();        //设置空心边框的宽度

  getColor();                  //获取画笔的颜色
  

 3.Canvas(画布)类

  画笔属性设置好之后,还需要将图像绘制到画布上。Canvas类可以用来实现各种图形的绘制工作,如绘制直线、矩形、圆等等。Canvas绘制常用图形的方法如下:

  绘制直线:canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint);

  绘制矩形:canvas.drawRect(float left, float top, float right, float bottom, Paint paint);

  绘制圆形:canvas.drawCircle(float cx, float cy, float radius, Paint paint);

  绘制字符:canvas.drawText(String text, float x, float y, Paint paint);

  绘制图形:canvas.drawBirmap(Bitmap bitmap, float left, float top, Paint paint);

Shader 渐变色设置

 //设置渐变器后绘制
        //为Paint设置渐变器
        Shader mShasder = new LinearGradient(0, 0, 40, 60, new int[]{Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW}, null, Shader.TileMode.REPEAT);
        mPaint.setShader(mShasder);
        //设置阴影
        mPaint.setShadowLayer(45, 10, 10, Color.GRAY);

Paint.Style区别

Paint.Style.FILL    :填充内部
Paint.Style.FILL_AND_STROKE  :填充内部和描边
Paint.Style.STROKE  :仅描边

Region 判断是否在路径范围内

“onTouchEvent 在自定义View 中”

@Override  
public boolean onTouchEvent(MotionEvent event) {  
    switch (event.getAction()) {  
    case MotionEvent.ACTION_DOWN:  
        // 按下  
        cx = (int) event.getX();  
        cy = (int) event.getY();  
        // 通知重绘  
        postInvalidate();   //该方法会调用onDraw方法,重新绘图  
        break;  
    case MotionEvent.ACTION_MOVE:  
        // 移动  
        cx = (int) event.getX();  
        cy = (int) event.getY();  
        // 通知重绘  
        postInvalidate();  
        break;  
    case MotionEvent.ACTION_UP:  
        // 抬起  
        cx = (int) event.getX();  
        cy = (int) event.getY();  
        // 通知重绘  
        postInvalidate();  
        break;  
    }  
      
    /* 
     * 备注1:此处一定要将return super.onTouchEvent(event)修改为return true,原因是: 
     * 1)父类的onTouchEvent(event)方法可能没有做任何处理,但是返回了false。 
     * 2)一旦返回false,在该方法中再也不会收到MotionEvent.ACTION_MOVE及MotionEvent.ACTION_UP事件。 
     */  
    //return super.onTouchEvent(event);  
    return true;    
}  

RectF

  • Android Rect和RectF的区别*
    1、精度不一样,Rect是使用int类型作为数值,RectF是使用float类型作为数值
    2、两个类型提供的方法也不是完全一致
    
    Rect:
    equals(Object obj)   (for some reason it as it's own implementation of equals)
    exactCenterX()
    exactCenterY()
    flattenToString()
    toShortString()
    unflattenFromString(String str)
    
    RectF:
    round(Rect dst)
    roundOut(Rect dst)
    set(Rect src)
    

Shader

//设置渐变器后绘制
        //为Paint设置渐变器
        Shader mShasder = new LinearGradient(0, 0, 40, 60, new int[]{Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW}, null, Shader.TileMode.REPEAT);
        mPaint.setShader(mShasder);
        //设置阴影
        mPaint.setShadowLayer(45, 10, 10, Color.GRAY);
Paint p=new Paint();
LinearGradient lg=new LinearGradien(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);  
参数一为渐变起初点坐标x位置,
参数二为y轴位置,
参数三和四分辨对应渐变终点,
最后参数为平铺方式,这里设置为镜像
Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码如下: mPaint.setShader(lg);

canvas.drawCicle(0,0,200,mPaint); //参数3为画圆的半径,类型为float型。
 
 
它除了定义开始颜色和结束颜色以外还可以定义,多种颜色组成的分段渐变效果

LinearGradient shader = new LinearGradient(0, 0, endX, endY, new int[]{startColor, midleColor, endColor},new float[]{0 , 0.5f, 1.0f}, TileMode.MIRROR);

其中参数new int[]{startColor, midleColor, endColor}是参与渐变效果的颜色集合,

其中参数new float[]{0 , 0.5f, 1.0f}是定义每个颜色处于的渐变相对位置,

这个参数可以为null,如果为null表示所有的颜色按顺序均匀的分布

LinearGradient有两个构造函数;

public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile)

参数:
float x0: 渐变起始点x坐标

float y0:渐变起始点y坐标

float x1:渐变结束点x坐标

float y1:渐变结束点y坐标

int[] colors:颜色 的int 数组

float[] positions: 相对位置的颜色数组,可为null,  若为null,可为null,颜色沿渐变线均匀分布

Shader.TileMode tile: 渲染器平铺模式

public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,Shader.TileMode tile)
float x0: 渐变起始点x坐标

float y0:渐变起始点y坐标

float x1:渐变结束点x坐标

float y1:渐变结束点y坐标

int color0: 起始渐变色

int color1: 结束渐变色

Shader.TileMode tile: 渲染器平铺模式


Android 透明度渐变

android 代码截屏

 /**
     * Returns the bitmap that represents the chart.
     *
     * @return
     */
    public Bitmap getChartBitmap() {
        // Define a bitmap with the same size as the view
        Bitmap returnedBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.RGB_565);
        // Bind a canvas to it
        Canvas canvas = new Canvas(returnedBitmap);
        // Get the view's background
        Drawable bgDrawable = getBackground();
        if (bgDrawable != null)
            // has background drawable, then draw it on the canvas
            bgDrawable.draw(canvas);
        else
            // does not have background drawable, then draw white background on
            // the canvas
            canvas.drawColor(Color.WHITE);
        // draw the view on the canvas
        draw(canvas);
        // return the bitmap
        return returnedBitmap;
    }
 /**
     * Returns the bitmap that represents the chart.
     *
     * @return
     */
    public Bitmap getChartBitmap() {
        // Define a bitmap with the same size as the view
        Bitmap returnedBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.RGB_565);
        // Bind a canvas to it
        Canvas canvas = new Canvas(returnedBitmap);
        // Get the view's background
        Drawable bgDrawable = getBackground();
        if (bgDrawable != null)
            // has background drawable, then draw it on the canvas
            bgDrawable.draw(canvas);
        else
            // does not have background drawable, then draw white background on
            // the canvas
            canvas.drawColor(Color.WHITE);
        // draw the view on the canvas
        draw(canvas);
        // return the bitmap
        return returnedBitmap;
    }

对canvas的translate()方法的理解

canvas.save();//锁画布(为了保存之前的画布状态)
        canvas.translate(10, 10);//把当前画布的原点移到(10,10),后面的操作都以(10,10)作为参照点,默认原点为(0,0)
        drawScene(canvas);
        canvas.restore();//把当前画布返回(调整)到上一个save()状态之前

        canvas.save();//锁画布(为了保存之前的画布状态)
        canvas.translate(160, 10);//把当前画布的原点移到(160,10),后面的操作都以(160,10)作为参照点,
        canvas.clipRect(10, 10, 90, 90);//这里的真实坐标为左上(170,170)、右下(250,250)
        canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
        drawScene(canvas);
        canvas.restore();

图片镜像

public Bitmap convertBmp(Bitmap bmp) {  
        int w = bmp.getWidth();  
        int h = bmp.getHeight();  
  
        Matrix matrix = new Matrix();  
        matrix.postScale(-1, 1); // 镜像水平翻转  
        Bitmap convertBmp = Bitmap.createBitmap(bmp, 0, 0, w, h, matrix, true);  
          
        return convertBmp;  
    }  

Android 防内存泄露handler

Android 防内存泄露handler

1.使用弱引用 WeakRefHander

	/**
	 * 作者: allen on 15/11/24.感谢开源作者https://coding.net/u/coding/p/Coding-Android/git
	 */
	
	/**
	 * 弱引用 handler 防止内存泄露
	 */
	public class WeakRefHander extends Handler {
	
	    private final WeakReference<Handler.Callback> mRef;
	    private final int mLoopTime;
	    private int NO_LOOP = -1;
	    private int what =0;
	
	    /**
	     * 循环
	     *
	     * @param loopAction
	     * @param loopTime
	     */
	    public WeakRefHander(Handler.Callback loopAction, int loopTime) {
	        super();
	        this.mRef = new WeakReference<>(loopAction);
	        this.mLoopTime = loopTime;
	
	    }
	
	    /**
	     * 不循环
	     *
	     * @param loopAction
	     */
	    public WeakRefHander(Handler.Callback loopAction) {
	        super();
	        mRef = new WeakReference<>(loopAction);
	        mLoopTime = NO_LOOP;
	    }
	
	    @Override
	    public void handleMessage(Message msg) {
	        Handler.Callback action = mRef.get();
	        if (action != null) {
	            action.handleMessage(msg);
	            if (mLoopTime != NO_LOOP) {
	                sendEmptyMessageDelayed(what, mLoopTime);
	            }
	        }
	    }
	
	    public void start() {
	        removeMessages(0);
	        sendEmptyMessageDelayed(0, 0);
	    }
	
	    public void start(int what, long delay) {
	        this.what = what;
	        removeMessages(what);
	        sendEmptyMessageDelayed(what, delay);
	    }
	
	    public void stop() {
	        removeMessages(what);
	    }
	
	    public void clear() {
	        removeMessages(what);
	        mRef.clear();
		    }
		}

2. 实现 Activity implements WeakRefHander.Callback

3. 在handleMessage处理业务逻辑

示例代码:

    public class MainActivity extends AppCompatActivity implements WeakRefHander.Callback {
        private WeakRefHander weakRefHander;
        private static final int HANDLER_MESSAGE_START = 1001;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            weakRefHander = new WeakRefHander(this, 1);
            weakRefHander.start(HANDLER_MESSAGE_START, 1000 * 30);
    }

    @Override
    public boolean handleMessage(Message msg) {
        switch (msg.what) {
            case HANDLER_MESSAGE_START:
                //Todo 处理业务逻辑
                break;
            default:
                break;
        }
        return true;
    }


    @Override
    public void onResume() {
        super.onResume();
        weakRefHander.start();
    }

    @Override
    public void onPause() {
        weakRefHander.stop();
        super.onPause();
    }

    @Override
    protected void onDestroy() {
        weakRefHander.clear();
        super.onDestroy();
    }
    }

-Github示例参考代码

参考作者:-Coding-Android作者

AndroidCustomView(投票 ,排名对比图)

Android Arsenal

##Github 地址前往

简介(投票 ,排名对比图)


  1. 一个简单的自定义 View 可高度定制
  2. 支持设置替换 支持 ,和反对的图标
  3. 支持自定义线宽和支持反对线的字体颜色

设置比分值

效果图

Dependency

Add dependency in your app module

dependencies {
	compile 'com.allen.comparsechart:comparsechart:1.0.0'
}

Maven

<dependency>
  <groupId>com.allen.comparsechart</groupId>
  <artifactId>comparsechart</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>

Usage

Java

    <com.allen.comparsechart.CompareIndicator
            android:id="@+id/CompareIndicator3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            app:approve_line_color="@android:color/holo_green_light"
            app:approve_res="@mipmap/approve"
            app:oppose_line_color="@android:color/holo_red_dark"
            app:opposite_res="@mipmap/opposite"
            />
CompareIndicator1.updateView(10,90);

股票走势图

Apk 下载地址

License

Copyright 2016 AllenCoder

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Android 项目中嵌入 ReactNative 模块

ReactNative的发展已经进入了很多开发者视野,作为一名原生开发者更是对 RN 充满了无限的好奇和期待,
本节将详细讲述如何将一个原生的 Android App 项目嵌入最新的 RN 模块

1. 准备开始

  1. 一个已有的 Android 原生项目
    1. 已经配置好的原生 Android 开发环境和 node.js已经 RN 环境
    2. 改造之后的流程图
      图片

2.开始改造

  1. 在原生 Android 项目的在app/build.gradle文件中,添加React Native依赖:
compile"com.facebook.react:react-native:+
  1. 加入.so 库
ndk {
    abiFilters "armeabi-v7a", "x86"
}   
  1. 在工程目录下找到工程的 build.gradle文件中,添加 maven依赖
allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}
  1. 在 app 目录里添加需要的权限
 <uses-permission android:name="android.permission.INTERNET"/>
 /**设置调试 的权限**/
 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
4.添加 FaceBook 的 ReactNative 调试的 activity
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

2. 编写原生的 ReactNative 模块 ,废话不多说,直接上代码

package com.allen.reactapp;

import android.app.Activity;
import android.os.Bundle;

import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

/**
 * 作者: allen on 16/7/31.
 */
public  class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                /**
                 * http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
                 * 调试模式下,建议直接写成 true 吧,我就因为这个错误,调了两天原因
                 */
//                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "myreactactivity", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }


}


 

到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。

========================================================================

========================================================================

3. 下面配置工程项目的 RN开发环境

  1. 先后顺序依次执行一下命令
 $ npm init

该命令会创建一个package.json文件,并且提示我们输入一些信息,默认不输入即可,不过name必须要为全英文小写哦,

##然后再依次去执行以下命令

 $ npm install --save react
 $ npm install --save react-native
 $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

创建完成后,去工程目录下修改 package.json
在scripts标签那边添加如下代码:

"start":"node_modules/react-native/packager/packager.sh"

package_json

3. 工程目录下创建 index.android.js 由于是测试代码直接 Copy FaceBook 的源码



/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我是 原生项目嵌入的 ReactNative
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('myreactactivity', () => AwesomeProject);


注意:此处需要修改注册的入口 保持一致,我的是 my_react_activity

4.检查以上所有步骤,有无遗漏,如果正常,接下来就可以顺利的运行你的混合 APP 了,如果还不行,你需要检查你的姿势是否正确?

运行你的 APP

  1. 在项目的工程路径运行以下命令来启动你的开发服务器
react-native start

或者执行

npm start
  1. android studio 调试你的 APP
    1. 演示效果图

===================

错误解决:

  Process: com.allen.reactapp, PID: 20469
java.lang.RuntimeException: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:911)
at com.facebook.react.ReactInstanceManagerImpl.access$700(ReactInstanceManagerImpl.java:100)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:197)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:180)
at android.os.AsyncTask$2.call(AsyncTask.java:295)
at java.util.concurrent.FutureTask.run(FutureTask.java:237)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:234)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
at java.lang.Thread.run(Thread.java:818)
Caused by: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.common.futures.SimpleSettableFuture.get(SimpleSettableFuture.java:68)
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:882)
    ... 9 more
Caused by: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices

解决办法:
.setUseDeveloperSupport(true) 调试模式下,建议直接写成 true 吧,

签名打包混合 APP
1. 将 js 文件存入 bundle 一起打包
执行命令:

curl -k "http://localhost:8081/index.android.bundle"> reactapp/src/main/assets/index.android.bundle

执行完命令成功,在 assets目录应该看到 index.android.bundle文件

Android studio 执行打包过程,作为一名 Android 老司机我就不再具体描述了

原 Android 移植 React Native 项目地址

Recyclerview 常见问题处理(持续更新维护中…)

Recyclerview 常见问题处理(持续更新维护中…)

注:该博客代码和相关Demo均已上传https://github.com/AllenCoder/Recyclerview

##1. RecyclerView滚动定位

经常在开发中,需要将Recyclerview滑动到某个位置,然后定位这一个具体项,将他显示到顶部,用RecyclerView的默认移动的方法并不能实现这一点
但是,利用LinearLayoutManager,可以很方便的实现这一点。
不多说,直接上代码


 int positon ="你指定滚动的位置";
 layoutManager.scrollToPositionWithOffset(positon,0);
 layoutManager.setStackFromEnd(true);

演示动画

##2. Recyclerview 动态调整View的宽高

假如你有 10个item ,产品偶尔会让你一屏幕适配6个 ,剩余的可以滚动
下面介绍两种情况下的处理方案,一种是水平布局,一种是垂直布局
网易效果

###方便的处理办法1:修改适配器


public class HorizationAdapter extends BaseQuickAdapter<News,BaseViewHolder> {
    private LayoutInflater layoutInflater;
    private int N ;


    public HorizationAdapter(Context mContex, int N) {
        super(item, DataServer.getNews());
        this.N =N;
        layoutInflater =LayoutInflater.from(mContex);
    }


    @Override
    protected void convert(final BaseViewHolder newsViewHolder, final News news) {
        newsViewHolder.setText(R.id.tv_title,news.title);
    }
    @Override
    protected View getItemView(final int layoutResId, final ViewGroup parent) {
        View view = layoutInflater.inflate(R.layout.item_news_title, parent, false);
        view.setMinimumWidth(parent.getWidth() / N);
        LinearLayout.LayoutParams parms = new LinearLayout.LayoutParams(parent.getWidth() / N, ViewGroup.LayoutParams.MATCH_PARENT);
        view.setLayoutParams(parms);
        return view;
    }

}

最终效果图:

效果图

React-Native:调用(Android)Native方法

有的时候我们使用React Native无法满足一些使用特定场景,这个时候就需要使用原生的Android方法,比如一些耗时的写操作,操作数据库或者多线程操作等。React Native可以直接调用系统的API(java方法),实现JavaScript与java语言的通讯,如果React Native中没有满足我们需求的Api,可以封装原生的方法提供JavaScript调用。

JavaScript和java通信是通过bridge实现的,在java层和JavaScript层的bridge分别存有相同的一份模块配置表。Java与JavaScript相互通信时,通过bridge里的配置表将所调用模块方式转为{moduleID,methodID,args}的形式传递给处理层,处理层通过bridge里的配置表找到对应的方法执行,如果有callback,则回传给调用层,如果没有执行就结束。

我们通过JavaScript调用Toast的例子来看下,JavaScript如何调用Java代码的。

新建一个项目:

react-native init app
在android的项目目录下面新建一个类RNToastModule,此类需要继承ReactContextBaseJavaModule。

ReactContextBaseJavaModule
ReactContextBaseJavaModule是一个抽象类,是用来被JavaScript调用对象的父类,我们需要Override一些ReactContextBaseJavaModule的方法。

首先要Override getName()方法:

   @Override
   public String getName() {
       return "RNToastAndroid";
   }

这个方法的返回值就是JavaScript中调用的名称,比如我们命名为RNToastAndroid,在JavaScript中可以这样调用:

var {NativeModules}=require('react-native');
var rnToastAndroid = NativeModules.RNToastAndroid;

在JavaScript可以这样调用:

rnToastAndroid.show("我的万能JS",  function (args) {
            alert(args)
        });

最后我们定义一个React调用的方法:

     @ReactMethod
    public void show(String msg, Callback callback){
        Toast.makeText(getReactApplicationContext(),"Js调用显示原生传递的参数是:"+msg,Toast.LENGTH_LONG).show();
        callback.invoke("RNToastModule 调用JS方法");
    }

完整RNToastModule代码:

/*
******************************* Copyright (c)*********************************\
**
**                 (c) Copyright 2015, Allen, china, shanghai
**                          All Rights Reserved
**
**                          
**                         
**-----------------------------------版本信息------------------------------------
** 版    本: V0.1
**
**------------------------------------------------------------------------------
********************************End of Head************************************\
*/
package com.app;

import android.widget.Toast;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
 * 文 件 名: RNToastModule
 * 创 建 人: Allen
 * 创建日期: 17/1/2 23:17
 * 邮   箱: AllenCoder@126.com
 * 修改时间:
 * 修改备注:
 */
public class RNToastModule extends ReactContextBaseJavaModule{
    public RNToastModule(final ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "RNToastAndroid";
    }
    @ReactMethod
    public void show(String msg, Callback callback){
        Toast.makeText(getReactApplicationContext(),"Js调用显示原生传递的参数是:"+msg,Toast.LENGTH_LONG).show();
        callback.invoke("RNToastModule 调用JS方法");
    }
}

这个使用了annotation定义的方式必须加上@ReactMethod。
这里的参数只能React Navive定义的参数。

注册ReactPackage
新建一个JsReactPackage类,继承ReactPackage。

/*
******************************* Copyright (c)*********************************\
**
**                 (c) Copyright 2015, Allen, china, shanghai
**                          All Rights Reserved
**
**                          
**                         
**-----------------------------------版本信息------------------------------------
** 版    本: V0.1
**
**------------------------------------------------------------------------------
********************************End of Head************************************\
*/
package com.app;

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.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * 文 件 名: JsReactPackage
 * 创 建 人: Allen
 * 创建日期: 17/1/2 22:34
 * 邮   箱: AllenCoder@126.com
 * 修改时间:
 * 修改备注:
 */
public class JsReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(final ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new RNToastModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(final ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

JsReactPackage创建了一个NativeModule的List。把JsReactPackage的实例都添加进去提供给JavaScript层调用。

需要在Application中实例化。
首先实现新建一个ReactNativeHost的实例并添加RNJavaReactPackage的实例:


private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
   @Override   
   protected boolean getUseDeveloperSupport() {   
       return BuildConfig.DEBUG;   
   } 
   @Override   
   protected List<ReactPackage> getPackages() { 
         return Arrays.<ReactPackage>asList(
                new MainReactPackage(), 
                //加入此处        
               new JsReactPackage()       
         ); 
     }
};

JavaScript中调用
在JavaScript显示Toast:

'use strict';

var {NativeModules}=require('react-native');
var rnToastAndroid = NativeModules.RNToastAndroid;

rnToastAndroid.show("我的万能JS",  function (args) {
            alert(args)
        });

这样就完成了从JavaScript中直接调用了Java中定义的方法。

参考链接

  1. https://segmentfault.com/a/1190000004486024
  2. http://blog.csdn.net/yuetingzhuying/article/details/51944254