你早知道的React Native-一一网

1.React Native是什么

React Native官方：一次学习，随处编写。。。 nice 不明觉厉

RN概述

使用React和JavaScript为Android和iOS创建本机应用

React Native将开发的最佳部分与React（用于构建用户界面的一流JavaScript库）结合在一起，可以在现有的Android和iOS项目中使用React Native，也可以从头开始创建一个全新的应用程序。React Native与Objective-C，Java或Swift中的组件可以顺利结合。如果您需要优化应用程序的某几个方面，那么可以简单的使用原生代码。这两者并不冲突。

与Flutter优缺对比

优势

热重装=快速编码

热重载允许开发人员将新代码直接注入正在运行的应用程序中，从而加快了开发过程。因此，开发人员可以立即看到更改，而无需重建应用程序。

一个代码库，两个移动平台

与Flutter完全相同：编写单个代码库为2个应用程序提供动力-涵盖Android和iOS平台。更妙的是，JavaScript通过与Web应用程序共享代码，在编写跨平台应用程序时为您提供了帮助。这是通过创建可编译为目标平台的抽象组件来完成的。

它使用一种流行的语言-JavaScript。

React Native使用JavaScript：许多开发人员都熟悉的一种编程语言（尽管Dart仍然不那么广为人知或使用）。而且，如果您是喜欢静态类型编程语言的开发人员，则甚至可以使用TypeScript（JavaScript子集）。

开发者的选择自由

React Native 允许开发人员精确地决定他们要使用什么解决方案。两者都根据项目的要求以及开发人员的喜好而定。假设，如果开发人员需要决定如何处理全局状态（如何存储和管理应用程序中许多组件中使用的数据），选择路由器库或在JavaScript和TypeScript之间进行选择–他们可以决定是否d倾向于使用自定义的UI库，或者自己编写。

相对成熟度。

官方的React Native版本是4年前发布的，因此Facebook团队有足够的时间来稳定API，并专注于解决问题和解决问题。现在，他们正在努力进行一些令人兴奋的改进-例如减小应用程序的大小。

活跃而广阔的社区。

React Native有庞大的开发者社区。不仅如此，还有无数的教程，库和UI框架使学习该技术变得容易，并且可以快速，轻松地进行开发。

对React开发人员易于学习

我们列表中的这一优势非常针对React开发人员。如果您具有Web开发的背景并且已经使用了流行的React解决方案，则可以轻松地使用React Native，而无需学习新的库。您可以使用相同的库，工具和模式。

缺点

不是原生的UI。

像任何跨平台解决方案一样，UI体验和性能都不会与本机应用程序中的完全相同，而是与之接近。但是，与Flutter相比，使用React Native更容易获得“自然感觉”。如果您希望Flutter应用程序具有本机组件，则需要进行其他工作。

组件少。

React Native仅支持开箱即用的基本组件（其中许多组件适用于开箱即用的平台，例如按钮，加载指示器或滑块）。Flutter旨在支持开箱即用的Material Design，因此该框架支持更多的小部件。

脆弱的用户界面。

React Native在后台使用本机组件这一事实应该使您充满信心，每次OS UI更新后，您的应用程序组件也将立即升级。就是说– 这可能会破坏应用程序的用户界面，但这种情况很少发生。

应用比本地应用更大。

用React Native编写的应用程序必须能够运行Javascript代码（JavaScript虚拟机）。Android默认情况下不具有此功能-意味着应用程序需要包括一个支持JavaScript代码的库，从而导致应用程序比其本机Android同类产品更大。使用React Native制作的iOS应用程序不会出现此问题，但它们通常仍比本地应用程序大。

2.环境搭建

安装依赖

必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。
虽然可以使用任何编辑器来开发应用，但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

使用Homebrew安装Node 和 Watchman

brew install node
brew install watchman
复制代码

在 Xcode 中安装 iOS 模拟器#

安装模拟器只需打开 Xcode > Preferences… 菜单，然后选择 Components 选项，即可看到各种可供安装的不同的 iOS 版本的模拟器。

CocoaPods

CocoaPods是用 Ruby 编写的包管理器

brew install cocoapods
复制代码

创建新项目

使用 React Native 内建的命令行工具来创建一个名为”AwesomeProject”的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）：

npx react-native init AwesomeProject
复制代码

可选参数
你可以使用–version参数创建指定版本的项目。注意版本号必须精确到两个小数点。

npx react-native init AwesomeProject --version X.XX.X
复制代码

还可以使用–template来使用一些社区提供的模板，例如带有TypeScript配置的：

npx react-native init AwesomeTSProject --template react-native-template-typescript
复制代码

编译并运行 React Native 应用

cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios
复制代码

核心组件和API

React Native 提供了一些内置的核心组件供你使用。

需要说明的是，你不会被局限在这些内置组件上。React Native 是大开源社区的作品，所以你还可以在 github 或是 npm 上搜索到带有react native关键字的大量的第三方组件。

基础组件

View

作为创建 UI 时最基础的组件，View 是一个支持 Flexbox 布局、样式、触摸响应、和一些无障碍功能的容器。

View 在设计上是可以嵌套使用的，也可以有任意多个任意类型的子视图。

import React from "react";
import { View, Text } from "react-native";
const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "blue", flex: 0.3 }} />
      <View style={{ backgroundColor: "red", flex: 0.5 }} />
      <Text>Hello World!</Text>
    </View>
  );
};
export default ViewBoxesWithColorAndText;
复制代码

Text

一个用于显示文本的 React 组件，并且它也支持嵌套、样式，以及触摸处理。

import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";
const TextInANest = () => {
  const [titleText, setTitleText] = useState("Bird's Nest");
  const bodyText = useState("This is not really a bird nest.");
  const onPressTitle = () => {
    setTitleText("Bird's Nest [pressed]");
  };
  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        {titleText}
        {"\n"}
        {"\n"}
      </Text>
      <Text numberOfLines={5}>{bodyText}</Text>
    </Text>
  );
};
const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});
export default TextInANest;
复制代码

嵌套文本

import React from 'react';
import { Text, StyleSheet } from 'react-native';
const BoldAndBeautiful = () => {
  return (
    <Text style={styles.baseText}>
      I am bold
      <Text style={styles.innerText}> and red</Text>
    </Text>
  );
};
const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold'
  },
  innerText: {
    color: 'red'
  }
});
export default BoldAndBeautiful;
复制代码

嵌套视图（仅限 iOS）

import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class BlueIsCool extends Component {
  render() {
    return (
      <Text>
        There is a blue square
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        in between my text.
      </Text>
    );
  }
}
复制代码