使用 React Native 构建应用程序的简要介绍

图片来自

Opensource.com

React Native 是一个使用 React 和 JavaScript 构建原生应用程序的框架。它允许您仅使用一种语言为 Android 和 iOS 创建应用程序。从已建立的财富 500 强公司到热门的新兴公司，数以千计的应用程序正在使用 React Native。最棒的是它是开源的；请参阅 GitHub 上的官方 React Native 存储库。

基础知识

React 是一个用于构建用户界面的 JavaScript 库，关键是使用“组件”。当您开始使用 React 开发应用程序时，您会被迫将应用程序分解为组件，每个组件代表应用程序的单个视图。组件是迭代代码的最佳方式。您不需要浏览数百行代码，只需要转到要修改的 React 组件即可。

组件有助于使您的代码可重用。例如，如果您创建一个名为“textbox”的组件，您将能够在每次需要时使用该组件——只需将其包含在您的新视图中即可。

效率和灵活性是使 React 成为非常强大的 JavaScript 库的特性，因此想象一下将相同的想法移植到原生应用程序。

Hello World 示例

React Native 入门很简单：按照网站上发布的指南，您将创建您的第一个 React Native 应用程序。您使用的操作系统会有所不同，因此请谨慎选择您的偏好。您还需要选择是否要构建 Android 或 iOS 示例。虽然您以后可以将该应用程序编译为两个移动平台，但您需要选择其中一个才能在模拟器上运行该应用程序。

当您按照入门指南中的所有步骤操作后，这将会显示在模拟器上

React Native welcome screen

^{React Native 欢迎屏幕}

使用 React 的应用程序

数以千计的应用程序使用 React Native，此列表仅显示其中的一部分。

我将重点关注 Yeti Smart Home，它连接您的所有家用电器，包括灯、扬声器、摄像头、插头等。它适用于 iOS 和 Android 设备。

代码

正如我之前所说，React Native 是一个开源平台，并且使用 React 的开源模块的应用程序非常常见。在这种情况下，您将专注于为您的测试应用程序创建的两个开源组件。任何人都可以使用这些组件，它们可以在 GitHub 上找到。

拨号盘

在创建此色轮的过程中，我的团队和我开发了这个开源软件包，供每个想要在 React Native 上创建拨号盘的人使用。在您的 React Native 代码中插入元素也非常简单。

<Dial
   initialRadius={brightness * DIF_RADIUS / 100 + MIN_RADIUS}
   radiusMax={MAX_RADIUS}
   radiusMin={MIN_RADIUS}
   onPress={() => this.toggle()}
   responderStyle={styles.responderStyle}
   wrapperStyle={styles.wheelWrapper}
   onValueChange={(a, r) => this.changeBrightness(r)} />

您可以在其中设置一些选项，这些选项定义了色轮的行为方式，并且通过自定义代码的某些部分，您可以将拨号盘用作色轮选择器。请记住，组件是可重用的，因此您可以将其用于选择颜色或任何其他您想要的值。

一个色轮选择器

A color wheel selector

开关

默认情况下，您可以在 Android 和 iOS 上为开关等创建原生组件。大多数应用程序都使用它们，并且您的手机上可能有一个应用程序使用开关来打开和关闭选项。让我们创建一个新版本的开关，该版本专为自定义而设计。您可以在 GitHub 上找到它。

在您的代码中使用它看起来像

import { Switch } from 'react-native-switch';
 
export const App = () => (
  <Switch
    value={true}
    onValueChange={(val) => console.log(val)}
    disabled={false}
    activeText={'On'}
    inActiveText={'Off'}
    backgroundActive={'green'}
    backgroundInactive={'gray'}
    circleActiveColor={'#30a566'}
    circleInActiveColor={'#000000'}
  />
)

开关看起来像

Switch Screen