什么是React Native？React Native是Facebook在2015年创建的一个跨平台移动应用开发框架。

React Native是Facebook在2015年创建的一个跨平台移动应用开发框架。 React Native使用JavaScript作为底层编程语言，其目的是帮助开发者可以用一个代码库为安卓和IOS设备构建原生移动应用。

在这篇文章中，我将介绍一些关键的概念和组件。

什么是跨平台开发

跨平台开发是编写可以在不同平台上运行的软件的艺术；你只需编写一次代码库，就可以在不同的平台上分享它。跨平台开发为你提供了一个广泛的目标受众，因为你有各种选择来运行你的代码库。例如，一个应用程序可以在安卓和IOS设备上共享，从而获得更广泛的用户群。

React Native的特点

让我们来看看React Native的一些特点。

一次编写，随处使用

React Native使用一次编写，到处使用的方法；这意味着用React Native编写的代码可以用来构建在多个平台上运行的本地应用程序。

庞大的社区基础

由于React Native是基于JavaScript的，所以它有一个显著的采用率和一个庞大的社区基础。JavaScript是最流行的前端编程语言，几乎所有的网站都用它来驱动。

第三方程序包和插件

通过React Native，你可以使用第三方插件和包来增强你的应用程序的能力。事实上，NPM上的许多开源JavaScript库都可以与React Native一起使用。

快速刷新

快速刷新是React Native的一个功能，它允许你对代码中的变化获得近乎即时的反馈。通过快速刷新功能，你可以在更新代码时立即看到每个UI的变化。

快速构建跨平台应用程序的能力

有了React Native，你不需要学习IOS或Android编程，除非你正在构建一个复杂的应用程序。这意味着你可以完全用JavaScript开发你的应用程序，并在不同的平台上分享代码，在IOS和Android中工作。

它不需要编译器

React Native有一个热重载功能，可以让你在每次修改代码后看到你的结果，而不像本地应用程序，每次修改都要编译代码。

易于调试

React Native利用Chrome和Safari的开发者工具，让开发者快速检测和解决错误。

一些用React Native构建的流行应用程序包括。

Facebook
Instagram
Skype
Pinterest
销售团队
纪元
彭博社
Wix
Uber Eats
以及更多

React Native是如何工作的？

与React不同的是，React Native可以渲染到网络的DOM，而React Native可以渲染到本地的iOS或Android视图。这使得开发者可以通过使用React Native构建原生的iOS和Android应用程序。

React与React Native

React和React Native非常相似，因为它们都使用JavaScript；但是，它们也有区别。

React用于开发网络应用，而React Native则用于创建移动应用。
说到设置，React需要设置工具，因为它是一个框架，而React Native则捆绑了构建应用程序所需的所有工具。
React不支持实时重载，而React Native支持实时重载。
React使用HTML规范提供的所有元素，如<div> 、<span> ，等等，而React Native引入了新的组件供使用：<View> 和<Text> 。

如何设置React原生开发环境

假设你想创建一个安卓和IOS应用，你会有两个独立的开发环境，即Xcode和Android Studi。然而，使用React Native，你只需要一个工具来支持这两个版本。

Expo CLI

Expo CLI是一个命令行应用程序，允许开发者在不接触Android Studio或Xcode的情况下构建跨平台的应用程序。Expo使你能够运行由Create React Native App构建的项目，而无需编译任何本地代码。Expo还可以让你在几乎没有配置的情况下启动和运行一个应用程序。

如何安装Expo CLI

npm install -g expo-cli

Expo应用程序

一旦你在我们的开发机器上安装了Expo CLI，下一个要求就是在IOS或Android设备上安装Expo Go应用程序来运行你的应用程序。Expo go应用程序允许你打开正在通过Expo CLI提供服务的应用程序。你可以根据你的设备从以下链接安装它。

安卓游戏商店-安卓Lollipop（5）及以上版本。
iOS应用商店-iOS 11及更高版本。

要用Expo创建一个新的应用程序，运行以下命令

expo init my-app

React Native组件

让我们看看React Native组件，以及你通常如何在你的React Native应用中使用它们。

`View` 组件

View 是任何React Native界面的基本构建块。它直接映射到应用程序的本地视图。

<View>
</View>

`Text` 组件

Text 是另一个基本组件，用于在你的应用程序中显示文本。

<View>
  <Text>Hello World!</Text>
</View>

`TextInput` 组件

这个组件被用户用来通过键盘在你的应用程序中输入文本。它还具有宝贵的属性，如自动更正、自动大写和自动聚焦。

<TextInput
        onChangeText={onChangeNumber}
        value={number}
        placeholder="My text here"
        keyboardType="numeric"
      />

`ScrollView` 组件

ScrollView 用于一次性渲染所有内容，并在需要时显示。例如，你可以使用来显示一个很长的项目列表。ScrollView

<ScrollView >
        <Text 
        VERY LONG TEXT
        </Text>
      </ScrollView>

`FlatList` 组件

一个FlatList 是用来显示道具的数据。它克服了长列表的组件渲染缓慢的问题。

<FlatList
 data={ }
 renderItem={}
 />

`SectionList` 组件

SectionList 与FlatList 相似，只是数据被组织成几个部分。

<SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} />}
/>

`Image` 组件

一个Image 组件用于显示图像。

<Image source={require('./cat.png')} />

`ImageBackground` 组件

ImageBackground 用于显示一个背景图像。

<ImageBackground source={uri:'https://unsplash.com/photos/06MHFfYv6YY'} style={{width: '100%', height: '100%'}}>  
    <Text>IMAGE TEXT</Text>  
  </ImageBackground>

`Button` 组件

一个Button ，用来显示可触摸的东西。

<Button  
    title="Press Me"  
/>

`Switch` 组件

Switch 是一个受控组件，用于显示一个布尔输入。

<Switch  
    value={this.state.switchValue}  
    onValueChange ={(switchValue)=>this.setState({switchValue})}/>

其他重要的组件包括。

KeyBoardAvoidiingView
ActivityIndicator
Alert
Dimensions
Linking
Modal
PixelRatio
刷新控制
StatusBar

摘要

Expo CLI 允许你在不需要Xcode或Android Studio的情况下，用最少的配置来搭建支架并开始运行。Expo的其他优点包括。

能够在你自己的设备上进行测试
无锁定性
建立一个应用程序只需要很少的时间

结论

React Native开发将你在网络开发中所习惯的大部分内容带到了原生开发中。

在开发原生应用时，必须注意IOS应用和Android应用之间的一些差异。例如，安卓使用Material Design，而IOS使用Human Interface Design。

例如，在IOS和安卓系统中，屏幕之间的导航是不同的；安卓设备在屏幕的底部有一个导航栏，而IOS设备有一个返回按钮。

如果你想让用户认为你的应用程序具有真正的本地界面，你就必须在你的设计中考虑这些小的差异。

什么是React Native？