windows react-native 开始

choco

cmd :

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

PowerShell:

Set-ExecutionPolicy Bypass; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

node.js

打开命令提示符窗口,使用Chocolatey来安装NodeJS。

choco install nodejs.install

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

创建项目& android studio

Yarn、React Native的命令行工具(react-native-cli)

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

创建项目

react-native init MyDemo


  • 打开android studio 打开该项目下的 android 文件夹
  • 更新 support build-tool 到本机拥有的版本,
    gradle 版本到3.3
  • 运行app!

运行&调试

运行react native

react-native start

以下结果说明已经运行

result
 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                            │
 │                                                                            │
 │  Keep this packager running while developing on any JS projects. Feel      │
 │  free to close this tab and run your own packager instance if you          │
 │  prefer.                                                                   │
 │                                                                            │
 │  https://github.com/facebook/react-native                                  │
 │                                                                            │
 └────────────────────────────────────────────────────────────────────────────┘

在手机app摇动 选择 Dev Setting / Debug server host & port for device

输入 {主机ip地址}:8081

安装react devtools

npm install -g react-devtools

若npm版本不够

npm install npm@latest -g

第三方安装

react-native-material-kit

npm i -S react-native-material-kit

android

  • React Native < 0.29 (Using rnpm)

 rnpm install react-native-material-kit
  • React Native >= 0.29

$npm install -S react-native-material-kit

$react-native link react-native-material-kit

Add the following snippet to your android/settings.gradle:

include ':RNMaterialKit'
project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')

Declare the dependency in your android/app/build.gradle

dependencies {
    ...
    compile project(':RNMaterialKit')
}

你可能感兴趣的:(windows react-native 开始)