導航:首頁 > 源碼編譯 > reactnative電商源碼

reactnative電商源碼

發布時間:2023-07-23 09:51:19

1. react-native 是怎麼實現原生代碼的

index.android.js是ReactNative的入口文件,後綴Android表示是在Android平台使用的代碼。ReactNative內置了babel,所以可以使用最新的JavaScript語法來開發(ECMAScript6簡稱es6),不熟悉es6的同學可以看看阮一峰寫的這本[e6入門教程](ECMAScript 6入門)。這里我簡單介紹一下require,Android程序員可以把require對應到Java的import,使用來導入一個JavaScript模塊的。`
var {ToastAndroid} = React`這種寫法叫結構賦值,就是從React這個對象中,提取出ToastAndroid這個屬性所對應的值,並賦值給ToastAndroid這個變數。可以看出toast模塊就是從react-native這個模塊中的ToastAndroid屬性,js中的Toast模塊API和Android中的JavaAPI基本是保持一致的。

2. React 源碼(三)使用本地依賴庫

在 React 應用中依賴基本上是通過 yarn 或者 npm 進行安裝的,但是在看源碼的過程中,有的時候想要去調試,或者說列印一些數據,如果可以在本地的 React 應用裡面依賴本地的 React 倉庫,那麼就可以進行上述的操作了。

在 React 官方文檔中的開發流程 裡面介紹了如何使用本地依賴庫。

在啟動本地 React 項目的時候出現了以下報錯

在將 react-jsx-dev-runtime.development.js 文件復制到 build/node_moles/react/cjs 目錄下即可。

3. 如何編譯ReactNative示常式序Examples

編譯示常式序需要將整個項目導入到androidStudio中,androidStudio導入項目時選擇react-native/ReactAndroid目錄。

由於項目依賴ndk因此如果要編譯Examples還需要安裝配置ndk目錄,下載ndk後是一個自解壓程序,會釋放ndk的目錄。

然後需要設置環境變數或者在react-native根目錄下新建local.properties文件,文件內容如下:

sdk.dir=c:\你的sdk目錄

ndk.dir=c:\你的ndk目錄

設置要之後就可以編譯了,導入和編譯的過程比較曲折,請繼續看下文。

在編譯AwesomeProject項目時,沒有用到ndk,實際上這里的ndk默認情況下並沒有用到,只是gradle的設置里有ndk因此必須配置ndk才能導入項目。

ndk是在編譯核心庫是才用到,核心庫位於react-native/ReactAndroid,導入整個項目時以lib形式存在。查看Examples目錄下UIExplorer,會發現在build.gradle是以在線的方式導入核心庫的。通過源碼的方式導入被注釋掉了。

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

// Depend on pre-built React Nativecompile 'com.facebook.react:react-native:0.11.+'

// Depend on React Native source.

// This is useful for testing your changes when working on React Native.

// compile project(':ReactAndroid')

}

由此可知,編譯UIExplorer並不需要ndk,如果你不想設置ndk,有2個辦法

1.拷貝AwesomeProject項目中的build.gradle,settings.gradle到UIExplorer的android目錄,在導入項目時選擇UIExplorer/android就可以了,這樣androidStudio會導入單個項目,否則會導入整個項目。

2.用androidStudio新建一個同名的項目,然後把UIExplorer目錄中的文件拷貝到新建的項目中。

編譯好之後啟動伺服器端,到react-native目錄下執行:

npm install

node packager\packager.js

windows下如果出現錯誤需要根據錯誤提示修改代碼http://www.cnblogs.com/zhaojietec/p/4853273.html

不過需要注意的是,目前為止,UIExplorer在Android下有一個bug,IOS下沒有問題,通過google可以找到了解決辦法。https://github.com/facebook/react-native/issues/2855

原因是,js代碼和android原生代碼不同步,通過build.gradle可以看到android下的引用的reactNative核心庫為11,而js代碼版本已經更新到12了。

解決的辦法有2個,一個是使用git工具(如smartGit),將js代碼恢復到之前的版本,另一個辦法是重新編譯reactNative的核心庫,編譯核心庫需要ndk,在mac下沒有問題,在windows編譯會出錯。編譯reactNative核心庫,對UIExplorer下注釋掉的依賴項進行修改即可,編譯速度較慢 需要在線下載第三方依賴庫。

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

// Depend on pre-built React Native//compile 'com.facebook.react:react-native:0.11.+'

// Depend on React Native source.

// This is useful for testing your changes when working on React Native.

compile project(':ReactAndroid')

}

由於windows下無法編譯,所以這里提供編譯好的aar文件,修改UIExplorer build.gradle中的依賴項就可以了。至於如何引入aar文件,可以自行搜索。當然mac下同樣也可以用這個aar,可以省去不少麻煩。

閱讀全文

與reactnative電商源碼相關的資料

熱點內容
dvd光碟存儲漢子演算法 瀏覽:757
蘋果郵件無法連接伺服器地址 瀏覽:962
phpffmpeg轉碼 瀏覽:671
長沙好玩的解壓項目 瀏覽:142
專屬學情分析報告是什麼app 瀏覽:564
php工程部署 瀏覽:833
android全屏透明 瀏覽:732
阿里雲伺服器已開通怎麼辦 瀏覽:803
光遇為什麼登錄時伺服器已滿 瀏覽:301
PDF分析 瀏覽:484
h3c光纖全工半全工設置命令 瀏覽:141
公司法pdf下載 瀏覽:381
linuxmarkdown 瀏覽:350
華為手機怎麼多選文件夾 瀏覽:683
如何取消命令方塊指令 瀏覽:349
風翼app為什麼進不去了 瀏覽:778
im4java壓縮圖片 瀏覽:362
數據查詢網站源碼 瀏覽:150
伊克塞爾文檔怎麼進行加密 瀏覽:890
app轉賬是什麼 瀏覽:163