RN入門 環境搭建和第乙個RN專案

2021-08-11 04:27:16 字數 3075 閱讀 7010

一、rn環境的搭建,參照rn中文網,有以下概念

二、當直接initrn專案時

很簡單,直接呼叫」react-native init」命令即可。會從相關的遠端copy配置好的工程目錄層次到本地。

三、當將原生整合rn時:

nodejs端環境

1、將原生工程放入android資料夾內

2、在根目錄下新建packege.json檔案,填入以下內容(也可通過「npm init」命令實現),類似gradle配置檔案:

version欄位沒有太大意義(除非你要把你的專案發布到npm倉庫)。scripts中是用於啟動packager服務的命令。dependencies中的react和react-native的版本取決於你的具體需求。一般來說我們推薦使用最新版本。你可以使用npm info react和npm info react-native來檢視當前的最新版本。另外,react-native對react的版本有嚴格要求,高於或低於某個範圍都不可以。

3、執行「npm install」命令安裝後,就會生成」node_moudles」資料夾。

android端**

乙個rn介面:

//該activity不用直接繼承reactactivity,但是實現defaulthardwarebackbtnhandler介面,以處理相關的手機按鍵事件

public

class

rnsceactivity

extends

implements

defaulthardwarebackbtnhandler

}}private

void

initrnrootview()

@override

public

void

invokedefaultonbackpressed()

@override

protected

void

onpause()

}@override

protected

void

onresume()

}@override

public

void

onbackpressed() else

}@override

public

boolean

onkeyup(int keycode, keyevent event)

return

super.onkeyup(keycode, event);

}//開啟懸浮窗(overlay)許可權

@override

protected

void

onactivityresult(int requestcode, int resultcode, intent data) }}

}}

需要把其中一段**拿出來說:

js端**

import react from 'react';

import from 'react-native';

class

helloworld

extends

react.component

}var styles = stylesheet.create(,

hello: ,

});

四、另:

1、當nodejs服務端啟動不起來時,停留在下圖所示:

此時需要通過命令列生成離線bundle。

2、 手動生成bundle檔案,需要我們執行如下命令:

3、react native專案在64位android手機上執行,會提示

「/data/data/com.***.***/lib-main/libgnustl_shared.so」 is 32-bit instead of 64-bit 這個錯誤。

解決方法就是取消掉所有的64位的.so檔案,全部載入32位的就可以了,下面是步驟

a、在專案的根目錄的 gradle.properties 裡面新增一行** android.usedeprecatedndk=true.

b、在 build.gradle 檔案裡新增以下**

android   

packagingoptions

} }

4、可以通過資料線和服務端連線即時拿取bundle檔案;也可通過wifi和服務端連線即時拿取bundle檔案(要求手機和電腦在同乙個wifi下);也可以通過命令直接生成離線bundle。

5、服務端執行npm start 視窗會顯示打包bundle的進度如下

環境搭建和我的第乙個go程式

1.開發環境 ubantu 2.安裝go 開啟控制台快捷鍵 shift alt t sudo apt get update sudo apt get install golang go3.安裝完成之後,建立屬於自己的go工程目錄,我是在 usr 目錄下建立goproject子目錄 如果建立目錄失敗,...

第乙個入門例子

1 配置thinkphp 2 嘗試控制器和檢視 1 資料庫 在開始之前,我們首先在資料庫thinkphp中建立乙個think data資料表 以mysql資料庫為例 create table if not exists think data id int 8 unsigned not null au...

lua環境搭建及第乙個lua程式

由於lua是比較小眾的語言,所以很多ide不支援值lua,下面介紹一種能迅速執行lua指令碼的方法 1.到官網安裝最新lua包 2.解壓檔案,命令列模式下進入到src目錄下,輸入指令 make macosx 3.執行完上乙個命令cd 到上一級目錄,輸入指令 sudo make install wan...