爽爆天ReactNative基础篇 - 2.3 搭建Android工程
来源:互联网 发布:深圳云计算工程师招聘 编辑:程序博客网 时间:2024/06/04 18:15
可以点击进入本人的个人网站,上面有最新的教程进度
开始本章之前,仍然不厌其烦地啰嗦几句,本章节基于苹果的mac OS X 系统,本系列教程的所有文章也都是基于此系统的,本人强烈建议使用mac进行开发。
本章概述(react-native下文有时会简称 rn):
- 【环境】我们一开始会先检查下需要安装与配置的环境是否OK。
- 【构建项目】然后我们会构建一个Android项目,如果已有项目我们会调整下结构。
- 【安装Android依赖库】为了建立Android与react-native的连接,我们要在Android项目中安装rn相关的依赖库。
- 【给Android添加rn相关代码】给Android项目添加 rn 代码,增加rn支持。
- 【给rn项目添加rn代码】给rn项目添加rn代码
- 【运行看效果】运行本地服务看Android应用最终效果。
本章示例代码
https://github.com/luochenxun/react-native-happy-learn.git 分支名: chapter2.3
你可以这样拉下来:找个目录,然后敲
git clone -b chapter2.3 https://github.com/luochenxun/react-native-happy-learn.git rnProject 进入 rn 目录,执行 `npm install`
基础环境
安装 AndroidStudio 、gradle 等
参见环境配置一章
建立现有Android项目(如果你已有Android项目,此步聚可以跳过)
在硬盘上找个地方放置我们的工程,比如 rnDemo。
然后在里面分别创建 iOS, Android, rn 三个目录,就像这样:
rnDemo // 项目根目录├── Android // 存放安卓项目代码├── iOS // 存放 iOS 项目代码└── rn // 存放 react-native 代码
然后我们在 Android 目录内新建一个Android项目(直接新建到Android根目录中)。
安装 react-native
使用命令行进入 rn 目录,运行 npm init
根据系统问的关于项目的问题回答之,便建立好了一个nodeJS项目,可以看到目录里多了一个package.json文件。
然后执行
npm install -s reactnpm install -s react-native
关于nodeJS的内容,可以参考后面关于NodeJS的介绍。这里你只要知道一个react-native工程,其实就是一个NodeJS工程。NodeJS是JavaScript的运行时环境,提供JS的本地编译运行与打包等功能。而npm提供了NodeJS的依赖库管理,这就体现在package.json文件中,这个json文件记录了本NodeJS项目的信息,依赖库信息等。
我们看看最后生成的两个文件 package.json & node_modules
- node_modules
node_modules是 NodeJS放依赖库的地方,我们下下来的 react-native库及他所依赖的库都放在 node_modules里面。每个库就是一个module,放在一个独立的文件夹里面。
- package.json
这个上面介绍过了。
我们修改下pakcage.json让他变成这样(正式使用时,注释要去掉):
{ "name": "MyRnDemo", # 项目名 "version": "1.0.0", # 项目版本号 "description": "My First react-native demo", # 项目描述 "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" # 项目运行的脚本 }, "dependencies": { # 本RN项目的依赖库,可以看到,这里依赖了 react 与 react-native "react": "^0.14.8", "react-native": "^0.25.1" }, "author": "luochenxun", "license": "ISC"}
其实有了这个package.json文件后,我们他日要升级 react-native 或是要添加其它库时,只要添加或修改到 dependencies内,然后把node_modules删之,最后在根目录直接运行 npm install
就行,npm会根据package.json中的依赖库信息,安装项目所有需要的依赖库。
安装Android依赖库
- app’s build.gradle
在 app module 的 build.gradle
中添加
文件头添加:apply from: "../../rn/node_modules/react-native/react.gradle"在dependencies内添加 : compile "com.facebook.react:react-native:+"
这样做主要目的是给app添加 react-native库支持。
- project’s build.gradle
但是因为这些库要从我们刚装的rn目录取之,所以还要在 project的 build.gradle
中修改 allprojects块为:
allprojects { repositories { mavenLocal() jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm // 注意这个路径是按照之前说的项目架构设的。如果你没按那个来,这个要改为对应rn项目module库的路径 url "$projectDir/../../rn/node_modules/react-native/android" } }}
Sync之后,可以发现依赖库中多了一些库,特别留意下react-native依赖库。
给Android添加rn相关代码
添加权限与注册 Manifest
在 manifest中添加rn所需权限:
<uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
增加一个设置的rn Activity:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
修改 MainActivity
让MainActivity继承于ReactActivity。注意,getMainComponentName() 方法返回的是对应的 rn 模块的名字, 必须与我们后面定义的rn模块名一致!
public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "RnDemo"; } /** * Returns whether dev mode should be enabled. * This enables e.g. the dev menu. */ @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } /** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */ @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); }}
我们可以看到,代码部分非常简单,就是继承一个 ReactActivity 并指定rn模块则可。React-Native库会自动帮我们把相应的rn模块装载进Activity之中。
启动rn
在终端进入rn目录,输入 npm start
开启本地服务
然后AS项目跑起来,就可以看到效果了。
如果你是在手机设备上运行,如果看不到效果,试下这个命令
adb reverse tcp:8081 tcp:8081
本章示例代码
https://github.com/luochenxun/react-native-happy-learn.git 分支名: chapter2.3
你可以这样拉下来:找个目录,然后敲
git clone -b chapter2.3 https://github.com/luochenxun/react-native-happy-learn.git rnProject 进入 rn 目录,执行 `npm install`
- 爽爆天ReactNative基础篇 - 2.3 搭建Android工程
- 爽爆天ReactNative基础篇 - 2.2 搭建iOS工程
- 已有Android工程集成ReactNative页面
- ReactNative for Android 之 windows环境搭建
- ReactNative环境搭建(Windows+Android Studio)
- Android:ReactNative环境搭建遇到的坑
- Android Studio环境下搭建ReactNative
- Windows 环境下Android ReactNative环境搭建
- ReactNative Windows Android开发环境搭建
- ReactNative环境搭建(Windows+Android Studio)
- 基于 webpack 搭建前端工程基础篇
- 基于 webpack 搭建前端工程基础篇
- 爽爆天ReactNative基础篇 - 2.1 配置开发环境
- ReactNative和Android共同开发基础流程
- ReactNative 基础
- ReactNative运行 UIExplorer 工程
- 简单的ReactNative工程
- android 工程搭建结构
- Android 架构例子
- Instant Run工作原理及用法
- No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Inverse
- Android绘图机制与处理技巧(三)——Android图像处理之图形特效处理
- 图片预览
- 爽爆天ReactNative基础篇 - 2.3 搭建Android工程
- 关于数据处理的杂谈
- SpringMVC入门学习(一) 环境搭建+实例演示
- Clion 使用自己编写的 Makefile编译
- 文本换行问题
- MATLAB帮助文档无法复制怎么办?
- android 进程间通信(Messager)
- 图像噪声
- 启动关闭hadoop集群和spark集群