如何构建React Native应用

本文将介绍构建React Native应用程序的步骤。 React Native是用于构建移动应用程序的JavaScript框架。 React Native本质上类似于React，除了它使用本机组件而不是Web组件。 尽管React Native和React有很多相似之处，但它们在几个方面也有所不同。 在React使用合成事件捕获点击，键盘和鼠标的同时，React Native使用onPress（）之类的事件处理程序以及TouchableHighlight和TouchableOpacity之类的可触摸元素来监听触摸并处理触摸事件。 这些触摸事件处理程序和元素在提供独特的用户体验（仅移动应用程序可以通过其UI组件提供）方面发挥着巨大作用。

由于React Native和React非常相似，以至于React Native可以在Web上运行，这通常是错误的，但是事实并非如此。 React Native应用程序不是混合的，这意味着它们在Web视图上不会像在移动设备上一样运行。 这也意味着在构建React Native应用程序时，您需要使用移动模拟器来测试您的代码。 对于iOS，请使用Xcode IDE。 因此，在开始构建React Native应用程序之前，最好先下载Xcode（如果尚未安装）。 你可以在这里下载。 此外，开发人员可以集成用于移动设备交互的本机API，包括CameraRoll，地理位置，推送通知和振动。

现在，这是构建React Native应用程序的步骤：

1. 安装React Native CLI

假设您已经安装了Node，则要在终端中运行以下命令行。 如果您要构建跨平台应用程序，请参阅此关于Android SDK的文档。 该博客将重点关注iOS。

$ npm install -g react-native-cli
$ react-native init ProjectName
$ cd ProjectName

当您进入该项目时，您会发现以下项目：1）包含React Native框架的node_modules ，2）包含有助于样式化您的应用程序和Xcode项目的文件夹的ios文件夹，3）由Android构建工具组成的android文件夹（不必担心本教程中的该文件夹），4） index.js和App.js是构成应用程序的起始文件。

现在，继续并启动服务器：

$ npm开始

Metro Bundler完成JavaScript捆绑后，您应该保持终端处于打开状态，以使服务器在http：// localhost：8081 /上运行。

让我们转到App.js文件，并逐一浏览每个代码：

 从'react'导入React，{组件};  // 1 
 从'react-native'导入{Platform，StyleSheet，Text，View}； 

  const指令= Platform.select（{...}）;  // 2 

 导出默认类App扩展Component  {...} // 3 

  const styles = StyleSheet.create（{...}）;  // 4 

1. 导入React Native应用程序所需的模块
2. 分配特定于平台的显示消息
3. 渲染UI组件
4. 定义应用程序的样式

现在，让我们看一下index.js ：

 从'react-native'导入{AppRegistry}； 
 从“ ./App”导入应用； 
 从“ ./app.json”导入{name作为SampleProject}； 

  AppRegistry.registerComponent（SampleProject，（）=> App）; 

在文件顶部，添加以下行：

  “使用严格”； 

此行表明代码应在严格模式下运行，这意味着它将帮助您编写更多“安全的” JavaScript。 可以在MDN上找到进入严格模式的详细信息。

让我们尝试在我们的应用程序中实现一个简单的功能，例如TouchableHighlight组件。 首先，在App.js中，在文件顶部的import语句中导入TouchableHighlight 。

 从'react-native'导入{Platform，StyleSheet，TouchableHighlight，Text，View}； 

然后，在render方法内，在内添加TouchableHighlight组件。

  render（）{ 
 返回（ 
   
   
  按此处 
   
   
   
  {this.state.count！== 0吗？  this.state.count：空} 
   
   
   
  ）; 
  } 

让我们为TouchableHighlight添加一个计数器。 创建this.state以启动从零开始的计数状态。

 状态= {计数：0} 

刚好在状态下，创建一个函数，该函数在每次按下按钮时将计数增加一，并更新状态。

 状态= {计数：0} 

  onPress =（）=> { 
  this.setState（{ 
 计数：this.state.count + 1 
  }） 
  } 

在TouchableHighlight上添加一个调用onPress函数的触摸事件处理程序。

  <TouchableHighlight 
  onPress = {this.onPress} 
  > 
  按此处 
   

随意设置容器的样式，如下所示：

  render（）{ 
 返回（ 
   
  <TouchableHighlight 
  style = {styles.button} 
  onPress = {this.onPress} 
  > 
  触摸此处 
   
   
   
  {this.state.count！== 0吗？  this.state.count：空} 
   
   
   
  ） 
  } 
  } 

  const styles = StyleSheet.create（{ 
 容器： { 
 弹性：1， 
  justifyContent：“中心”， 
 填充水平：10 
  }， 
 按钮：{ 
  alignItems：'中心'， 
  backgroundColor：“＃DDDDDD”， 
 内边距：10 
  }， 
  countContainer：{ 
  alignItems：'中心'， 
 内边距：10 
  }， 
  countText：{ 
 颜色：“＃FF00FF” 
  } 
  }） 

最终结果应如下所示：

而已！ 您刚刚构建了一个简单的React Native应用程序，集成了一个可触摸的元素。 它与React非常相似，如果您熟悉该框架，您会发现React Native非常容易遵循。

使用React Native构建本机应用程序的一些优势在于，它允许开发人员构建可在Android和iOS上运行的跨平台应用程序，因此非常节省成本和时间。 另外，它对开发人员很友好，因为您唯一需要了解的就是JavaScript（以及一些React）。