📜  React Native 简介

📅  最后修改于: 2022-05-13 01:56:18.710000             🧑  作者: Mango

React Native 简介

如果您想为 Android 和 iOS 构建移动应用程序。你应该学什么?每个应用程序的各个本地语言,即 Android 的Java和 iOS 的 Swift/Objective-C?,实际上没有。原生 Android 和 iOS 开发完全不同,而且成本可能很高——首先,语言本身很不同,其次,所有底层 API 都不同——使用 GPS 的方式不同,创建动画的方式不同,您拨打网络电话的方式不同。

我们一直在寻求更短的开发周期、更快的部署时间和更好的应用程序性能。并且有很多混合移动框架,例如 NativeScript、React Native、 Ionic、Xamarin、PhoneGap 等。

React Native:它是 Facebook 开发的一个框架,用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初,Facebook 只开发了 React Native 来支持 iOS。但是,由于最近支持 Android 操作系统,该库现在可以为这两个平台呈现移动 UI。

先决条件:

  • HTML、CSS 和 JS 的基本知识。
  • ReactJS 的基础知识。
  • NodeJs 应该安装在您的系统中。

使用 React Native 构建非常高效且容易上瘾,但入门可能有点棘手。 React Native 使用 JavaScript 运行时 Node.js 来构建您的 JavaScript 代码。如果您还没有安装 Node.js,那么是时候安装它了!

安装:这里我们将使用 Expo CLI 版本,它可以更流畅地运行您的 React Native 应用程序。请按照以下步骤一一设置您的 React 原生环境。

  • 第 1 步:打开终端并运行以下命令。
    npm install -g expo-cli
  • 第 2 步:现在 expo-cli 已全局安装,因此您可以通过运行以下命令来创建项目文件夹。
    expo init "projectName"
  • 第 3 步:现在进入创建的文件夹并使用以下命令启动服务器。
    cd "projectName"
    npm start web

项目结构:

例子:

App.js
import  React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
  
const Home=()=>{
  return (
      
          Geeksforgeeks
      
  )
}
  
  
export default function App() {
  return (
    
          
    
  );
}


输出:

与其他框架和语言相比的优势:每当用 Swift/Objective-C 或Java编写的应用程序有更新时,整个应用程序都需要重新编译,并且必须再次将新版本分发到 App Store。所有这些都可能需要几周时间,具体取决于 App Store 的审核流程。

为了避免这种麻烦,React Native 应用程序以不同的方式工作,原生应用程序能够定位特定的 JavaScript 代码,这些代码稍后会在应用程序在实际设备上启动时被下载和编译。这样,可以立即更新应用程序,而无需一次又一次地向 App Store 提交新版本。

要知道 React Native 是如何工作的?你可以访问这篇文章。