2018.07.17 18:22

React Native开发指南之搭建环境和热更新

 React Native开发指南之搭建环境和热更新


1.安装 react-native-cli

npm install -g yarn react-native-cli


最好指定0.55.4版本 否则你会看到各种报错,各种运行出错的bug


react-native init testversion react-native@0.55.4


Administrator@lenovo-PC MINGW64 /e/jackieli/React Native
$ react-native init test --version react-native@0.55.4 
This will walk you through creating a new React Native project in E:\jackieli\React Native\test
Installing react-native@0.55.4...
Consider installing yarn to make this faster: https://yarnpkg.com


2.安装python2.7 和安卓环境变量和sdk 还有java 环境和android studio运行环境(android studio

是安装rn运行需要的安卓版本包根据报错信息自行安装依赖版本)



C:\Users\Administrator>java -version
java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) Client VM (build 25.101-b13, mixed mode, sharing)




C:\Users\Administrator>echo %ANDROID_HOME%
C:\Android\android-sdk

C:\Users\Administrator>echo %PATH%
C:\Program Files\Python35\Scripts\;C:\Program Files\Python35\;D:\Program Files (
x86)\Ruby23\bin;d:\Program Files\ImageMagick-7.0.1-Q16;C:\ProgramData\Oracle\Jav
a\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS
 Client\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Windows\syste
m32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1
.0\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program
Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Int
el\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(
R) Management Engine Components\IPT;C:\Program Files (x86)\VisualSVN\bin;C:\Prog
ram Files\TortoiseSVN\bin;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\b
in;C:\Users\Administrator\AppData\Roaming\nvm;d:\Program Files\nodejs;C:\Program
 Files\OpenVPN\bin;D:\Program Files\nodejs\;F:\redis\;C:\ProgramData\chocolatey\
bin;C:\Program Files\Java\jdk1.8.0_172\bin;C:\Android\android-sdk\tools;C:\Andro
id\android-sdk\platform-tools;C:\Users\Administrator\AppData\Roaming\nvm;d:\Prog
ram Files\nodejs;C:\Python27;C:\ProgramData\Administrator\atom\bin;C:\Program Fi
les\Docker Toolbox;C:\Users\Administrator\AppData\Roaming\npm



注意:系统增加PATH C:\Android\android-sdk\platform-tools;C:\Android\android-sdk\tools

C:\Python27; (python的版本必须是2.7)




3.安装启动Genymotion设备和虚拟机





4.cmd查看链接虚拟设备


C:\Users\Administrator>adb devices
List of devices attached

如果出现这个下面没哟内网ip的话 说明没有启动成功链接虚拟设备


这个坑踩坑很久!!!其实是需要把虚拟机启动起来看到ip了 然后在去模拟器start


(最后我得到了一些解决方案。首先转到虚拟框并检查上方绿色按钮以启动和虚拟设备,然后单击此按钮,然后在桌面上正确显示时会出现一个屏幕。现在去genymotion并运行你的设备正常功能。试试吧,谢谢......)





5.代码保存刷新热更新

BUILD SUCCESSFUL

Total time: 45.982 secs
Running C:\Android\android-sdk/platform-tools/adb -s 192.168.56.101:5555 reverse tcp:8081 tcp:8081
Starting the app on 192.168.56.101:5555 (C:\Android\android-sdk/platform-tools/adb -s 192.168.56.101:5555 shell am start -n com.test/com.test.MainActivity)...
Starting: Intent { cmp=com.test/.MainActivity }


这里build成功后的本地ip和虚拟机中的ip要对应 热更新才能成功




在React Native中启用热重新加载


热重新加载的优势:

您可以通过在代码更改时自动重新加载应用程序来加快开发时间。

在React Native中启用热重新加载


按照以下步骤启用热重新加载功能:


首先在设备或模拟器上启动您的应用程序。

命令运行React Native App:

react-native run-android


然后单击模拟器并按CTRL + M(MacOS上的CMD + M)或摇动具有正在运行的应用程序的Android设备。


然后从弹出窗口中选择Enable Hot Reloading选项。


在React Native中启用热重新加载


disable hot reloading热加载



然后你就可以愉快地开发RN啦!!!



package.sjon配置文件


{
 "name": "test",
 "version": "0.0.1",
 "private": true,
 "scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest"
 },
 "dependencies": {
  "react": "16.3.1",
  "react-native": "0.55.4"
 },
 "devDependencies": {
  "babel-jest": "23.2.0",
  "babel-preset-react-native": "4.0.0",
  "jest": "23.3.0",
  "react-test-renderer": "16.3.1"
 },
 "jest": {
  "preset": "react-native"
 }
}


index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('test', () => App);


App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";

export default class App extends Component {
 //Binding the function with class
 buttonClickListener = () => {
  alert("西门互联 !!!");
 };

 render() {
  return (
   <View style={styles.container}>
    <Text style={styles.headerText}>Power by 西门互联 In React Native.</Text>

    <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
     <Button
      onPress={this.buttonClickListener}
      title="按钮1"
      color="#00B0FF"
     />
    </View>

    <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
     <Button
      onPress={this.buttonClickListener}
      title="按钮2"
      color="#EC407A"
     />
    </View>

    <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
     <Button
      onPress={this.buttonClickListener}
      title="按钮3"
      color="#1DE9B6"
     />
    </View>

    <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
     <Button
      onPress={this.buttonClickListener}
      title="按钮4"
      color="#FF3D00"
     />
    </View>
    <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
     <Button
      onPress={this.buttonClickListener}
      title="按钮5"
      color="#90A4AE"
     />
    </View>
   </View>
  );
 }
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
  backgroundColor: "#F5FCFF"
 },
 headerText: {
  fontSize: 20,
  textAlign: "center",
  margin: 10,
  fontWeight: "bold"
 },
 button: {
  padding: 20,
  fontSize: 15,
  fontFamily: "arial",
  width: 400,
  height: 40,
  textAlign: "center"
 }
});




下面是常见报错


## 模拟器屏幕变红 

报错例如
unable to load script from assets 'index.android.bundle'.make sure your bundle is packaged correctly or you're running
a packager serve

mkdir android\app\src\main\assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

react-native run-android

##设备没连接

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 11.535 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

DIY表情

(添加http或https协议)

提交评论