欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react-native + androidstudio 混合开发 - 1(基础配置)

程序员文章站 2022-07-14 21:41:22
...

谢谢。最近好热,大家夏天快乐~早日成为技术大牛
希望一起学习,互相进步 ^ ^
老规矩,先上图
react-native + androidstudio 混合开发 - 1(基础配置)
注意版本匹配问题package.json

"dependencies": {
    "install": "^0.10.1",
    "react": "^16.0.0-alpha.12",
    "react-native": "^0.46.1"
  }

之前一直load不出来好急,最后决定更新版本
react-native + androidstudio 混合开发 - 1(基础配置)
终于搞定

前提:node环境git环境
(以window为例)
react-native + androidstudio 混合开发 - 1(基础配置)

1:新建安卓工程
react-native + androidstudio 混合开发 - 1(基础配置)

2:选择sdk版本 一定要 参考官方文档http://facebook.github.io/react-native/docs/getting-started.html
sdk - plateforms
react-native + androidstudio 混合开发 - 1(基础配置)
sdk - tools
react-native + androidstudio 混合开发 - 1(基础配置)
接下来点击next - >就好了
react-native + androidstudio 混合开发 - 1(基础配置)
3:进入项目,修改bulid
compileSdkVersion 23
compile ‘com.android.support:appcompat-v7:23.0.1’

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "25.0.0"
    defaultConfig {
        applicationId "com.gmz.myreact"
        minSdkVersion 23
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
}

4:andoridstudio 的Terminal终端 使用命令行导入react 和 react-native包

npm init

生成package.json文件

package.json文件是npm下载模块Module时会带有这个json文件 里面有当前模块的介绍。如版本信息,依赖的模块 以及运行Node命令的起始文件路径等等 

entrypoint最好先写成index.android.js,一会儿就不用配了
react-native + androidstudio 混合开发 - 1(基础配置)
输完后按enter ,yes?提示时继续enter
react-native + androidstudio 混合开发 - 1(基础配置)

react-native + androidstudio 混合开发 - 1(基础配置)
继续npm命令导包
为了快速下载,配置淘宝镜像

npm config set registry “https://registry.npm.taobao.org

开始安装

npm install --save react react-native

react-native + androidstudio 混合开发 - 1(基础配置)

完成后会多一个node_modules包

node_modules 目录是一个Node模块 里面主要是js文件,我们使用js编写代码时引用的一些模块,组件主要是在这里面,比如reative,react-native

react-native + androidstudio 混合开发 - 1(基础配置)

5:配置
①添加.flowconfig文件(可以不搞,flow是一种代码检查规范)
新建file,将https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig里的内容复制
react-native + androidstudio 混合开发 - 1(基础配置)
②配置 package.json 信息
script 标签下添加start(执行语句)

 "start": "node node_modules/react-native/local-cli/cli.js start"

react-native + androidstudio 混合开发 - 1(基础配置)
③新建一个入口 index.android.js文件,复制点东西过去,就helloworld吧

index.android.js 文件是编写android项目的起始文件  
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}> 你好世界</Text>
        <Image style={styles.pic} source={{uri: 'http://192.168.10.124:8080/gmz.jpg'}}></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  pic: {
        width:96,
        height:83,
  },
});
AppRegistry.registerComponent('HelloWorld', function() { return HelloWorld });

react-native + androidstudio 混合开发 - 1(基础配置)
④gradle配置
依赖
react-native + androidstudio 混合开发 - 1(基础配置)

react-native + androidstudio 混合开发 - 1(基础配置)
ndk配置 ndk 、packagingOptions 、configurations.all(这个是为了解决react和google在debug代码时候的冲突)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "25.0.0"
    defaultConfig {
        applicationId "com.gmz.myreact"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    packagingOptions {
        exclude "lib/arm64-v8a"
    }
    configurations.all {
        resolutionStrategy.force'com.google.code.findbugs:jsr305:1.3.9'
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile "com.facebook.react:react-native:0.46.1" //天node_modules下自己的
    testCompile 'junit:junit:4.12'
}

build successful 后就可以了

查看librarys里是否有react最新版本react-native + androidstudio 混合开发 - 1(基础配置)

6:添加基础代码

保证getMainComponentName与index.android.js里function返回值一致,es6好像可以 => 代替callback- function了

Mainactivity

package com.gmz.myreact;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button) findViewById(R.id.bt);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this, MyReactActivity.class));
            }
        });
    }
}

MyReactActivity(记得在清单文件中配置)直接继承模板代码,很6~

package com.gmz.myreact;

import android.support.annotation.Nullable;

import com.facebook.react.ReactActivity;

/**
 * 作者:haoran   on https://github.com/woaigmz 2017/7/11.
 * 邮箱:aaa@qq.com
 * 说明:
 */

public class MyReactActivity extends ReactActivity {
    @Nullable
    @Override
    protected String getMainComponentName() {
        //这个在Registry.registerComponent注册
        return "HelloWorld";
    }
}

MyApplication (记得在清单文件中配置)

import android.app.Application;

import com.facebook.react.BuildConfig;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

/**
 * 作者:haoran   on https://github.com/woaigmz 2017/7/11.
 * 邮箱:aaa@qq.com
 * 说明:
 */

public class MyAppliaction extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(new MainReactPackage());
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

}

添加DevSettingsActivity

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

7:另开一个 Termial 运行react-native start 编译js代码 启动服务

react-native start

react-native + androidstudio 混合开发 - 1(基础配置)
这个提示说明服务已开启,可以测试一下
http://localhost:8081/index.android.bundle?platform=android
会很慢,请耐心等待
出现一下页面说明js编译成功,服务开启 –>
react-native + androidstudio 混合开发 - 1(基础配置)
8:AS运行项目 – 真机调试
apk安装成功以后在原生的MainActivity点击按钮进入react界面。
会load一下js脚本(确保npm - start 或 react-native start )
AS
react-native + androidstudio 混合开发 - 1(基础配置)
真机
react-native + androidstudio 混合开发 - 1(基础配置)
当报缺少
index.android.bundle时有2种解决方案
①打开Termial窗口 , 新建assets文件夹创建bundle文件,生成bundle文件(assets下),(assets目录存在执行下面命令才有效)

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

react-native + androidstudio 混合开发 - 1(基础配置)
哈哈~
react-native + androidstudio 混合开发 - 1(基础配置)
②package.json里添加

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
  }

重启服务,手机reload,进行调试
9:react界面会出现的异常
先挖坑,白屏(应用管理–权限管理–允许弹窗)
红屏 ( 使劲摇晃手机 )
react-native + androidstudio 混合开发 - 1(基础配置)
点击DevSettings,更改静态ip与react服务一致
react-native + androidstudio 混合开发 - 1(基础配置)
继续摇晃手机reload

出现bug提示,建议google,*,github