跳转到内容
必威体育论坛必威精装下载APPRedfin解决方案徽标必威体育论坛必威精装下载APPRedfin解决方案徽标 联系
蓝色天空下的黄色建筑起重机

React Native基础知识:第1部分

必威体育论坛必威精装下载APPRedfin Solutions在6月初开始使用React Native,当时有客户需要一款可以与他们的Drupal网站集成的应用。因为这是我们使用React Native的第一个项目,所以我们记录了一些有用的信息与团队其他成员分享。这是三篇博文系列的第一篇,将涵盖我们在使用React Native时学到的知识和发现的最有用的东西。

Expo&React本地CLI

构建React本机应用程序有两个主要的框架选项:React本机CLI和Expo。

React Native CLI是大多数具有本机应用程序开发背景的人选择的选项,因为它以简化的工作流换取添加用Java或Objective-C编写的本机模块的能力。

Expo对于web开发背景的人来说更容易,因为它为那些不需要将本机模块链接到应用程序的人提供了一个简化的工作流程。它带有集成库,一个用于开发的客户端应用程序,并且不需要Android Studio或XCode来分别为Android和iOS构建项目。世博会通过一个签名密钥处理建筑过程。这加快了开发过程,并为应用程序的新功能腾出时间。

组件

React Native的设计理念将每个屏幕分割成一个组件层次结构。在最低的层次是简单的组件,比如. 较大的组件由其他较小的组件构成。它们也可以设计为另一个组件的特定情况。例如,创建一个组件的更特定版本组件,如果您重复创建你好,世界组件。

道具与状态

每个组件都有两个数据存储,其中包含有关其自身的信息,即道具和状态。道具是组件的参数。它主要在创建组件时设置。例如,图像组件的URL在创建并存储在props中时传入。

相反,状态用于存储更改的数据。当状态更改时,组件将重新渲染以显示更改。例如,卷滑块的当前值可能存储在状态中。

JSX

JSX是React Native附带的JavaScript的语法扩展。这是一种简单的方式来表示如何将React本机组件呈现为屏幕上的元素。JSX是直观的,因为它在React Native中的功能与HTML在网页中的功能相同。看看这个JSX,它可以在屏幕上显示文本和图像:

你好,世界

生命周期API

每个组件都遵循一个生命周期API。这是一组方法,用于在组件生命周期中的某些事件期间响应本机调用。除了组件的构造函数之外,惟一需要的方法是render()方法,它表示如何通过返回通常由JSX定义的React元素在屏幕上呈现组件。

样式

React Native中的样式类似于CSS。每个组件都可以使用样式表道具进行样式设置,该道具是在JavaScript对象内部传递的一组CSS样式选择器。他们甚至支持Flexbox。例如:

constyles=StyleSheet.create({header:{fontwweight:'bold',fontSize:30,},},});

当您要将其应用于组件时:你好,世界

要查看所有可用的样式选项,请查看文档对于每个组件。

反应导航

通过规划每个屏幕将包含哪些内容以及如何在它们之间导航,在导航时启动应用程序设计更容易。这种自上而下的方法可以防止在编写时在屏幕之间切换上下文。

React Navigation是世博会的集成库之一,提供了在React Native中创建导航系统的工具。在初始化项目时选择“标签”选项,世博会将构建一个简单的导航系统。

StackNavigator是控制屏幕的好方法,因为它允许在不同屏幕之间交换时保持并发。每个屏幕将保留其信息。

要了解有关技术细节的更多信息,请查看反应导航文档.

建筑屏风

要创建一个简单的静态屏幕,您不需要很多移动部件,因为React Native已经为这些部件提供了强大的组件。例如,组件,,可以在只需显示信息和图像的页面上执行大部分提升操作。一个简单的屏幕可能如下所示:

从“React”导入React;从“react native”导入{ScrollView,StyleSheet};导出默认函数hamberscreen(){return(您的母亲是一只仓鼠!);}hamberscreen.navigationOptions={title:'hamberscreen',};const styles=StyleSheet.create({container:{flex:1,paddingTop:15,backgroundColor:'#fff',},},});

这只是学习如何使用React Native的开始。请关注我们即将发布的关于在Drupal中使用React Native的博文。与此同时,你看使用Drupal和React Native设计应用程序,由我们的暑期实习生开发人员Jacob Morin介绍的Design 4 Drupal课程。

Baidu