如何用 React Native 开发一款电商 App?

北京app开发公司亿点时代给您介绍一种app开发新方式——React Native开发,

基本概念

简单的介绍一下React Native是如何进行工作的以及Java的代码是如何装换成到一个强大的移动端app。我们需要知道的是任何的一个React Native 应用都是双线程的:

1. 主线程

主线程管理着程序的用户界面,处理包括手势和触摸在内的所有本地交互。因为RN允许在源代码中添加android java,Objective C或swift代码,所以这些代码块也可以在此线程中执行。是不是感觉这样开发变得很舒服。

2. Java 线程

这个线程执行在Java编译器写的Java代码(默认状态下是在iOS平台中,并且通过构件可以发送到Android设备上。)

 

正如名字所表示的,中间件可以帮助实现JavaScriprt线程和主线程之间的数据(信息)处理。这些信息可以被异步和批量处理。中间件可以保证JS代码与本机模块进行对话并且与设备API交互。

现在我们对RN的结构有了基本的了解,接下来我们来介绍实现的过程。

搭建开发环境

如果你已经安装了RN并且对开发系统比较了解,你就可以跳过去看下一部分内容了。如果你是刚入门的新手,那么你可以按照官方的安装指南(会有更加详细的介绍)去操作,或者按照我下面说的去做。首先确认你的电脑上已经成功安装了node和yarn模块。我们将利用CRNA(create-react-native-app )工具来创建模版,运行下面的指令实现程序“HelloNative”

create-react-native-app HelloNative

cd HelloNative

npm start

这将为你启动一个可扩展的服务器,并在终端输出一段QR代码。使用CRNA工具出现的警告只有:

it may not use the latest version of react-native

如果出现这个警告,你可以使用Expo CLI 或者 Expo XDE去解决。

然后安装Expo 在你的iOS系统或者Android系统上,并将手机和你的电脑一样联接到网络中。使用Expo app你就可以在你的手机上进行操作啦。

React Native app

你可以运用yarn ios 和yarn android指令分别在iOS和Android模拟器上测试,这样你就可以运行你的React-Native app啦。

如果你知道如何打开app中的扩展菜单,你将会看到有支持热加载和实时重载选项。这些可以使你可以迅速在Andriod环境下加载你的app