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

最新推荐文章于 2024-01-09 01:19:33 发布

cumo3681

最新推荐文章于 2024-01-09 01:19:33 发布

阅读量150

点赞数

文章标签： java python 编程语言 android javascript ViewUI

原文链接：https://opensource.com/article/17/2/using-react-native-build-native-apps

版权

React Native是使用React和JavaScript构建本机应用程序的框架。它允许您为两种应用程序仅使用一种语言来创建Android和iOS应用程序。从成熟的《财富》 500强公司到热门的新兴创业公司，成千上万的应用程序都在使用React Native。最好的部分是它的开源。请参阅GitHub上的官方React Native存储库。

基础

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

组件有助于使您的代码可重用。例如，如果您创建一个名为“文本框”的组件，则可以在每次需要时使用该组件，只需将其包括在新视图中即可。

效率和灵活性是使React成为非常强大JavaScript库的功能，因此请想象将相同的想法移植到本机应用程序中。

Hello World示例

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

完成入门指南中的所有步骤后，它将显示在模拟器上：

^{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 
     
     ) 
     
     } 
     
     />

那里有一些选项可以定义色轮的行为，通过自定义代码的某些部分，您可以将转盘用作色轮选择器。请记住，组件是可重用的，因此您可以使用它来选择颜色或所需的任何其他值。

色轮选择器：

开关

默认情况下，您可以在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' 
     
     } 
     
     

  
     
     /> 
     
     


     
     )