關於環境,你需要了解的知識:
1、node.js / npm / webpack
react-native算是web應用,幾乎所有代碼都是JavaScript來寫的(哈哈哈哈哈此時我要說一句:JavaScript是世界上最好用的編程語言,PHP的同學肯定不符)
下面你需要了解node.js和npm,神器登場,讓npm助react-native一臂之力。
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境,使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。
npm是什么? => JavaScript 倉庫
npm is written in Node.js, so you need to install Node.js in order to use npm. You can install npm via the Node.js website, or by installing a Node Version Manager(NVM). This chapter explains both options.
npm 為你和你的團隊打開了連接整個 JavaScript 天才世界的一扇大門。它是世界上最大的軟件注冊表,每星期大約有 30 億次的下載量,包含超過 600000 個 包(package) (即,代碼模塊)。來自各大洲的開源軟件開發者使用 npm 互相分享和借鑒。包的結構使您能夠輕松跟蹤依賴項和版本。
npm部分組成:
網站 是開發者查找包(package)、設置參數以及管理 npm 使用體驗的主要途徑。
注冊表 是一個巨大的數據庫,保存了每個包(package)的信息。
CLI 通過命令行或終端運行。開發者通過 CLI 與 npm 打交道。
npm install <package_name>
管理本地npm包的最好方式是新建一個package.json文件
To get a default package.json
npm init -y
To add an entry to your package.json's dependencies:
npm install <package_name> --save
To add an entry to your package.json's devDependencies:
npm install <package_name> --save-dev
全局安裝
npm install/uninstall -g <package>
npm install -g webpack@3.10
npm install webpack-cli -D
在 package.json 文件所在的目錄中執行 npm update 命令
如需刪除 node_modules 目錄下面的包(package),請執行:
npm uninstall webpack
如需從 package.json 文件中刪除依賴,需要在命令后添加參數 --save:
npm uninstall --save webpack
Webpack 是一個模塊打包器。它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成對應的靜態資源。

Webpack 本身只能處理 JavaScript 模塊,如果要處理其他類型的文件Webpack Loader
Webpack Loader 可以理解為是模塊和資源的轉換器,它本身是一個函數,接受源文件作為參數,返回轉換的結果。
Webpack 在執行的時候,除了在命令行傳入參數,還可以通過指定的配置文件來執行。默認情況下,會搜索當前目錄的 webpack.config.js 文件,這個文件是一個 node.js 模塊,返回一個 json 格式的配置信息對象,或者通過 --config 選項來指定配置文件。
在根目錄創建 package.json 來添加 webpack 需要的依賴:
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "zhaoda",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0", //兼容版本
"style-loader": "^0.13.0", //大致相當的版本
"webpack": "^1.12.2"
}
}
npm install
創建 webpack.config.js:
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
同時簡化 entry.js 中的 style.css 加載方式:
require('./style.css')
最后運行 webpack,可以看到 webpack 通過配置文件執行的結果和上一章節通過命令行 webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' 執行的結果是一樣的。
另外Redux也了解一下,日后說不定你會用到
2、開發環境配置
官方配置 Mac & Windows
https://reactnative.cn/docs/getting-started/
