美文网首页
windows react-native 开始

windows react-native 开始

作者: 吃人的锅 | 来源:发表于2018-01-23 13:42 被阅读9次

    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
    <!--cd MyDemo-->
    <!--react-native run-android-->
    
    • 打开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 开始

          本文链接:https://www.haomeiwen.com/subject/pbdsaxtx.html