React-Native环境搭建(windows)

时间 2019-11-08

标签 react native 环境搭建 windows 栏目 React 繁體版

原文原文链接

** React-Native环境依赖node环境，若是还未安装node 的朋友能够先看上一篇文章**html

Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，能够加速node模块的下载。React Native的命令行工具用于执行建立、初始化、更新项目、运行打包服务（packager）等任务。（此时node 6.9.2 npm 3.10.9）java

npm install -g yarn react-native-cli

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

yarn config set registry registry.npm.taobao.org --global

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

Android Studio安装

下载地址：developer.android.google.cn/studio/inde… [React Native目前须要Android Studio2.0或更高版本。]

JDK8安装，JAVA_HOME环境变量

Android Studio须要Java Development Kit [JDK] 1.8或更高版本。你能够在命令行中输入 javac -version来查看你当前安装的JDK版本。若是版本不合要求，则能够到官网上下载。下载地址：node

www.oracle.com/technetwork…

设置并检查java环境变量JAVA_HOME，如C:\Program Files\Java\jdk1.8.0_121 [默认安装位置]

Android SDK和模拟器

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明，请不要改动安装过程当中的选项。好比Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（不然在react-native run-android时会报appcompat-v7包找不到的错误）。react

肯定全部安装都勾选了，尤为是Android SDK和Android Device Emulator。

在初步安装完成后，选择Custom安装项：

HAXM加速驱动

检查已安装的组件，尤为是模拟器和HAXM加速驱动。

开启HAXM（Hardware Accelerated Execution Manager intel CPU硬件加速驱动）

参考资料：android

software.intel.com/en-us/andro…

系统要求：ios

Intel cpu 支持Intel® VT-x 虚拟化

至少4G内存，推荐8G

操做系统：

Microsoft Windows* 10 (64-bit)

Microsoft Windows* 8 and 8.1 (64-bit)

Microsoft Windows* 7 (64-bit)

先在Bios配置开启Intel Virtualization Technology, VT-x；大体过程以下，上网查找本身机器的bios设置git

下载Intel HAXM驱动

intelhaxm-android.exe

检查

安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager

在SDK Platforms窗口中，选择Show Package Details，而后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 2三、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools窗口中，选择Show Package Details，而后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。而后还要勾选最底部的Android Support Repository.

点击ok进入下载页面

ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

C:\Users\Administrator\AppData\Local\Android\sdk [默认位置]

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

设置path

你须要关闭现有的命令符提示窗口而后从新打开，这样新的环境变量才能生效。

新建一个AS（Android Studio）工程

建立一个模拟器，AVD(Android Virtual Device)

建立React-Native工程

react-native init AwesomeProject

cd AwesomeProject

react-native run-android

代码分析

AppRegistry

AppRegistry是JS运行全部React-Native应用的入口。应用的根组件应当经过

AppRegistry.registerComponent方法注册本身，而后原生系统才能够加载应用的代码包而且在启动完成以后经过调用AppRegistry.runApplication来真正运行应用。

AppRegistry应当在require序列中尽量早的被require到，以确保JS运行环境在其它模块以前被准备好。

registerComponent(appKey: string, getComponentFunc: ComponentProvider)

StyleSheet

StyleSheet提供了一种相似CSS样式表的抽象。github

引入StyleSheet的缘由：

从代码质量角度：

** 从render函数中移除具体的样式内容，可使代码更清晰易懂。** ** 给样式命名也是对render函数中的原始组件的做用的一种标记。**npm

从性能角度：

建立一个样式表，就可使得咱们后续更容易经过ID来引用样式，而不是每次都建立一个新的对象。windows

它还使得样式只会在JavaScript和原生之间传递一次，随后的过程均可以只传递一个ID（这个优化还未实现）

View

做为建立UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，而且它能够放到其它的视图里，也能够有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图，不管它是UIView、

仍是android.view.View。下面的例子建立了一个View，包含了两个有颜色的方块和一个自定义的组件，而且设置了一个内边距：

<View style={{flexDirection: 'row', height: 100, padding: 20}}>
  <View style={{backgroundColor: 'blue', flex: 0.3}} />
  <View style={{backgroundColor: 'red', flex: 0.5}} />
  <MyCustomComponent {...customProps} />
</View>
复制代码

View的设计初衷是和StyleSheet搭配使用，这样可使代码更清晰而且得到更高的性能。尽管内联样式也一样可使用。

Text

一个用于显示文本的React组件，而且它也支持嵌套、样式，以及触摸处理。在下面的例子里，嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式，不过标题上还附加了它本身额外的样式。标题和文本会在顶部依次堆叠，而且被代码中内嵌的换行符分隔开。

元素在布局上不一样于其它组件：在Text内部的元素再也不使用flexbox布局，而是采用文本布局。这意味着内部的元素再也不是一个个矩形，而可能会在行末进行折叠。

样式的继承

React Native实际上仍是有一部分样式继承的实现，不过仅限于文本标签的子树。在下面的代码里，第二部分会在加粗的同时又显示为红色：

<Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>
    and red
  </Text>
</Text>
复制代码

咱们相信这种看起来不太舒服的给文本添加样式的方法反而会帮助咱们生产更好的App：

(对开发者来讲) React组件在概念上被设计为强隔离性的：你应当能够在应用的任何位置放置一个组件，并且只要属性相同，其外观和表现都将彻底相同。文本若是可以继承外面的样式属性，将会打破这种隔离性。

(对实现者来讲) React Native的实现也被简化了。咱们不须要在每一个元素上都添加一个fontFamily字段，而且咱们也不须要隐含地在显示文本的时候向上遍历树。惟一的样式继承在原生Text组件中编码，也不会影响到其它组件或者系统自己。

Dimensions

本模块用于获取设备屏幕的宽高。

例子：var {height, width} = Dimensions.get('window');

@param {string} dim 想要获取的尺寸信息的字段名。

@returns {Object?} 返回的尺寸信息值。

Image

一个用于显示多种不一样类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

用法样例：

renderImages() {
  return (
    <View>
      <Image
        style={styles.icon}
        source={require('./icon.png')}
      />
      <Image
        style={styles.logo}
        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
      />
    </View>
  );
}
复制代码