構(gòu)建環(huán)境 AndroidStudio2.0以上?Python? nodejs3.xx
安裝完成后
直接創(chuàng)建一個(gè)android的項(xiàng)目质涛，在創(chuàng)建的過(guò)程中，我們要主要要注意的是炮叶，項(xiàng)目最低的版本為16
創(chuàng)建完成之后我們打開我們的cmd递雀，然后進(jìn)入我們項(xiàng)目的根目錄下
執(zhí)行 npm init命令
出現(xiàn)上圖所示的提示后育勺，根據(jù)提示我們輸入我們的項(xiàng)目配置就可以了
一直到所有的提示輸入完成后豁跑，就會(huì)出現(xiàn)上圖的結(jié)果慧瘤，我們可以看到這個(gè)命令在我們項(xiàng)目的根目錄下創(chuàng)建了一個(gè)package.json的文件
我們輸入yes后酒繁，就創(chuàng)建了這個(gè)文件导梆。此時(shí)轨淌，我們打開我們項(xiàng)目的根目錄迂烁，就會(huì)看到這個(gè)文件，我們打開這個(gè)文件递鹉，修改一下文件的內(nèi)容盟步，
將scripts的內(nèi)容改為
? ??????????????????????????????????????"start":"node node_modules/react-native/local-cli/cli.js start"? ??
結(jié)果如下圖所示
修改完成之后，保存文件躏结。接下來(lái)我們要加載一些RN的一些組件却盘，繼續(xù)在cmd中輸入如下的命令
npm install --save react react-native
此時(shí)我們要等待下載，時(shí)間可能會(huì)有點(diǎn)長(zhǎng)媳拴，我們需要等待一會(huì)黄橘。下載完成之后，就會(huì)出現(xiàn)如下的提示
圖中箭頭標(biāo)示的是我們需要的一個(gè)模塊屈溉，但是系統(tǒng)提示我們此時(shí)我們的項(xiàng)目中沒(méi)有這個(gè)文件塞关，所以我們需要下載這個(gè)文件。
根據(jù)提示我們?nèi)ハ螺d我們需要的模塊子巾，我們需要執(zhí)行如下的命令
npm I –S (之前提示我們的模塊)
執(zhí)行之后我們等待下載完成就可以了帆赢。
下載完成之后我們到我們的項(xiàng)目根目錄下新建一個(gè)文件? ? ? ??index.android.js
創(chuàng)建完成后我們要復(fù)制一些代碼到文件中，
import React,{Component} from 'react';
import {
??? AppRegistry,
??? StyleSheet,
??? Text,
??? View
} from'react-native';
class HelloWorldextends Component {
??? render() {
??????? return (? ? ?
??????????????? Hello, World
??????????????? This is my first RN fixed Android Project
??????? )
??? }
}
var styles =StyleSheet.create({
??? container: {
??????? flex: 1,
??????? justifyContent: 'center',
??? },
??? hello: {
??????? fontSize: 20,
??????? textAlign: 'center',
??????? margin: 10,
??? },
});
AppRegistry.registerComponent('HelloWorld', ()
=> HelloWorld);
復(fù)制如上代碼到我們創(chuàng)建的文件中即可线梗。
然后我們要在我們的app中打一些依賴
compile "com.facebook.react:react-native:+"
然后在我們的項(xiàng)目的build文件下加一個(gè)url
maven{
url "rootDir$/node_modules/react-native/android"
}
完成之后我們要?jiǎng)?chuàng)建一個(gè)activity繼承自ReactActivity這個(gè)類來(lái)承接我們的index.android.js的界面
完成之后我們要重寫我們的Application
完成之后椰于，我們就在我們的cmd中開啟這個(gè)項(xiàng)目，執(zhí)行如下命令
npm start
注意仪搔，下面是我遇到的一些亢
如果運(yùn)行項(xiàng)目我們的額log日志打印如下的錯(cuò)誤
表明我們要兼容64位的手機(jī)瘾婿，我們要做如下的處理
在我們項(xiàng)目的gradler的文件下修改，添加一個(gè)屬性
android.useDeprecatedNdk=true.
最后在我們的modules下添加一個(gè)
ndk {
abiFilters "armeabi-v7a", "x86"
}
packagingOptions {
exclude "lib/arm64-v8a/librealm-jni.so"
}
}
然后再在我們的項(xiàng)目main下面創(chuàng)建一個(gè)assets目錄
在我們的cmd中我們執(zhí)行如下命令
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/?
執(zhí)行完成之后 我們?cè)谖覀兊捻?xiàng)目下的assets目錄下后有兩個(gè)新的文件
然后我們重新run我們的項(xiàng)目就可以了
現(xiàn)在? 一個(gè)rn項(xiàng)目就創(chuàng)建完成了烤咧。
