使用React Native开发Android应用，并在谷歌Play上发布

本文最初发表于Okta开发者博客必威滚．感谢您对合作伙伴的支持，是他们让SitePoint成为可能。必威西盟体育网页登录

随着移动应用程序的使用预计将继续增长，现在是进入这个市场的最佳时机。Android是迄今为止全球最受欢迎的操作系统，手机用户获得Android应用程序的主要方式是谷歌Play Store。在本教程中，你将构建一个React Native应用程序，我将教你如何选择一个设计，以及设置你的React Native环境，让你的编辑器发挥最大作用的技巧，以及在谷歌Play上发布它。

这是最终应用程序的样子:

在本教程中，我参考了Karan Goel的教程大型项目名单项目灵感。你将建造质因数分解取一个数并返回它的质因数的问题。

为React Native应用确定界面主题

除了应用程序逻辑之外，UI和主题决策是你为应用程序做出的最重要的决定。这包括下拉菜单和按钮等控件，以及屏幕上的布局。由于我们使用的是基于react的技术，所以我们将使用风格的组件这是一种流行的，轻量级的方法来主题化React应用程序(它也在React Native上工作很好)．有一个整个页面列出基于样式组件的组件和组件系统。在本教程中，您将使用样式组件自己构建组件。

设置Android生产环境

为了构建最终的APK(你将上传到应用商店的应用格式)，你需要安装Android Studio．一旦完成，确保你有SDK版本27，因为这是React Native使用的。

安装JDK

您还需要确保最近安装了Java Development Kit(如版本8)。安装根据您的平台而有所不同。你可以使用Oracle的Java SDK或使用SDKMAN来安装其他选项，比如OpenJDK。

添加React Native CLI并初始化骨架

接下来，你应该安装React本机命令行接口。对于这个，你应该确保你有节点安装这取决于您的操作系统。(我正在用版本8.12.0)．

npm安装- g react-native-cli@2.0.1

你应该有一个命令react-native对您可用，其中包括初始化选择。

React-native init prime_components

这将创建prime_components目录，并把一个React Native项目，与一个可运行的框架。切换到目录，连接安卓手机或运行模拟器(后已安装的Android Studio)，并运行计划。

注意:如果Android Studio提示您在创建模拟器之前打开一个项目，则可以指向prime_components /安卓目录中。

cdPrime_components react-native run-android

要查看要上传到Play Store的输出，请转到android / app /构建/输出/ apk /调试．你应该看到app-debug.apk大约8MB大小。

减少你的Android应用的输出大小

你需要确保你的用户拥有尽可能少的下载量。它已经非常小了(大约8MB)，因为你使用的是命令行(就像Expo一样，即使是基本的应用程序也能产生25MB)，但我们可以进一步减少．去android / app / build.gradle并将以下变量更改为真正的：

def enableSeparateBuildPerCPUArchitecture = true def enableseparateguardinreleasebuilds = true

你还需要移除ndk的部分defaultConfig移除ndk abiFilters中的冲突配置错误:

ndk {abiFilters "armeabi-v7a"， "x86"}

重新运行之后react-native运行android您应该在输出目录中看到两个apk(小得多——在4MB到5MB之间)。

添加Linting到你的React Native应用程序

编写任何JavaScript(如React)都需要工具来确保你没有犯任何明显的错误，这对初学者来说是一个很大的帮助。其中最常见的是ESLint可以直接插入到您的项目和编辑器中。

首先，使用NPM添加linter:

npm安装-D eslint@5.9.0 babel-eslint@10.0.1

一组常见的插件是Airbnb的配置所以也要加上这些:

npm安装-D eslint-config-airbnb@17.1.0 eslint-plugin-jsx-a11y@6.1.2 eslint-plugin-react@7.11.1 eslint-plugin-import@2.14.0

现在把下列内容放入.eslintrc.js(你需要创建这个文件):

模块．出口＝｛“扩展”：airbnb的，“解析”：“babel-eslint”，“env”：｛“开玩笑”：真正的，｝，“规则”：｛“no-use-before-define”：“关闭”，“反应/ jsx-filename-extension”：“关闭”，“反应/ prop-types”：“关闭”，“comma-dangle”：“关闭”｝，“全局”：｛“获取”：假｝｝

现在只需将插件添加到编辑器中。对于Sublime来说ESLint用它输出错误(或问题)CTRL + ALT + e（Cmd + Option + e在Mac)。也一个用于VSCode．

方法可以自动修复其中的许多错误eslint——修复命令，可以在编辑器中使用ESLint修复包中。

为React Native添加样式化组件

React和React Native使用web技术构建接口，即HTML, CSS和JavaScript。一个非常流行的React(和React Native)库是风格的组件它清理了如何添加CSS到你的组件。

例如，看看下面的代码，取自React Native示例应用程序(这是你得到的react-init)：

出口默认的类应用程序扩展组件<道具>｛渲染（）｛返回（<视图风格＝｛风格．容器｝><文本风格＝｛风格．欢迎｝>欢迎来反应本地的！</文本><文本风格＝｛风格．指令｝>来得到开始，编辑应用程序．js</文本><文本风格＝｛风格．指令｝>｛指令｝</文本></视图>）；｝｝常量风格＝样式表．创建（｛容器：｛flex：1，justifyContent：“中心”，alignItems：“中心”，写成backgroundColor：“# F5FCFF”，｝，欢迎：｛字形大小：20.，textAlign：“中心”，保证金：10，｝，指令：｛textAlign：“中心”，颜色：# 333333的，marginBottom：5，｝，｝）；

声明DOM元素(视图，文本)，将它们链接到样式，然后稍后创建样式表。

使用样式组件，你可以做以下事情:

常量容器＝风格．视图｀flex：1；justify-content：中心；对齐项目：中心；背景颜色：# F5FCFF；｀；常量欢迎＝风格．文本｀字形大小：20.；text-align：中心；保证金：10；｀；常量指令＝风格．文本｀text-align：中心；颜色：# 333333；margin-bottom：5；｀；出口默认的类应用程序扩展组件<道具>｛渲染（）｛返回（<容器><欢迎>欢迎来反应本地的！</欢迎><指令>来得到开始，编辑应用程序．js</指令></容器>）；｝｝

它既干净又更可移植(CSS名称不会冲突等)。

要安装它，运行NPM安装styled-components@4.1.1从根目录。

添加自定义字体到React Native应用程序

获得自定义字体Racing Sans One在应用程序中，首先需要下载TTF并将其放入资产/字体(您需要创建这个目录)。然后将以下内容添加到您的package.json：

“rnpm”：｛“资产”：［”。/资产/字体/”］｝

最后运行react-native链接从命令行。您现在应该看到字体在android / app / src / main /资产/字体．你现在应该可以使用它了。创建一个组件文件夹，并把以下内容放在组件/ Header.js：

进口风格从“styled-components /本机”；出口默认的风格．文本｀颜色：黑色的；字体类型：RacingSansOne-Regular；字体大小：32px；margin-top：120px；背景颜色：透明的；text-align：中心；｀；

然后，将此导入到您的App.js并添加<标题>欢迎标题> < /以上文本节点:

进口头从“/组件/头。”；.．.出口默认的类应用程序扩展组件<道具>｛渲染（）｛返回（<视图风格＝｛风格．容器｝><头>欢迎</头><文本风格＝｛风格．欢迎｝>欢迎来反应本地的！</文本><文本风格＝｛风格．指令｝>来得到开始，编辑应用程序．js</文本><文本风格＝｛风格．指令｝>｛指令｝</文本></视图>）；｝｝

你应该得到一个格式化好的头文件:

在Android上调整你的应用为全屏

要让应用程序不显示标题栏，请转到android / app / src / main / res / / styled.xml值并将以下内容添加到< >风格元素:

<项的名字＝＂android: windowFullscreen＂>真正的项>

现在，当你重新运行，你应该看到导航栏消失了。

创建Android应用程序组件

它可能需要很长时间来决定最终的设计，包括布局、颜色和字体。这通常是一个迭代的过程。在这里，您将了解如何建立您在开始时看到的最终结果-这是受到启发相关在线教程而且样式的例子——但要记住，到达你喜欢的地方需要时间。

改变App.js致以下:

进口反应从“反应”；进口｛容器，头，输入，键盘，ButtonRow｝从”。/组件的；常量应用程序＝（）= >（<容器><头>主要的组件</头><输入>123456</输入><键盘><ButtonRow键＝｛［' 1 '，' 2 '，“3”］｝/><ButtonRow键＝｛［“4”，“5”，“6”］｝/><ButtonRow键＝｛［“7”，“8”，“9”］｝/><ButtonRow键＝｛［' 0 '，“清楚”，“去”］｝/></键盘></容器>）；出口默认的应用程序；

你可以在这里看到有样式的组件是多么的干净。我们有一个头，一个输入和一个键盘(所有您选择的名称)，它们都被一个容器包围。没有多余的信息。样式化发生在组件中。

创建组件目录中。内部组件/ index.js写上以下内容:

出口｛默认的作为输入｝从”。/输入'；出口｛默认的作为容器｝从”。/容器；出口｛默认的作为头｝从“/头。”；出口｛默认的作为键盘｝从”。/键盘'；出口｛默认的作为按钮｝从”。/按钮”；出口｛默认的作为ButtonRow｝从”。/ ButtonRow '；

这只是一个方便的模块，允许导入App.js,即'从' ./components '中导入{容器，报头，输入，键盘，ButtonRow}; '否则，您必须在单独的行中导入每个组件。

把这个放进组件/ Container.js(注意:在React Native中你的组件必须使用大写字母!)

进口风格从“styled-components /本机”；出口默认的容器＝风格．视图｀flex：1；｀；

很简单，你在扩展视图组件并赋值为1的flex值(在此上下文中意味着“占用一切”)。

组件/ Header.js：

进口风格从“styled-components /本机”；出口默认的头＝风格．文本｀flex：1．5；字体大小：80px；字体类型：Chathura-ExtraBold；背景颜色：rgb（29，31，33）；颜色：黄金；text-align：中心；｀；

此外，还有一个样式化的文本组件，具有较大的居中字体，金色和灰色背景。确保你安装Chathura字体从谷歌字体之前!

组件/ Input.js：

进口风格从“styled-components /本机”；出口默认的输入＝风格．文本｀flex：2；text-align：正确的；字体类型：Audiowide-Regular；text-align-vertical：中心；字体大小：70；颜色：耐火砖；背景颜色：黄金；｀；

类似于以前，除了现在的Audiowide-Regular字体(也可从谷歌字体)．

组件/ Keypad.js：

进口风格从“styled-components /本机”；出口默认的键盘＝风格．视图｀flex：6；背景颜色：rgb（29，31，33）；padding-top：10px；padding-bottom：10px；｀；

也只是一个样式化的视图(本质上是一个容器，比如< div >在HTML)。

组件/ ButtonRow.js：

进口反应从“反应”；进口风格从“styled-components /本机”；进口｛按钮｝从“。”；常量RowBox＝风格．视图｀flex：1；flex-direction：行；｀；出口默认的ButtonRow＝（｛键｝）= >（<RowBox>｛/* https://stackoverflow.com/a/32157488 */｝｛键．地图（关键= >（<按钮文本＝｛关键｝关键＝｛关键｝/>））｝</RowBox>）；

在这里，事情变得复杂起来。您正在导入按钮从当前目录(您将马上创建该目录)中创建一个名为RowBox哪个不是出口的，然后呢ButtonRow被定义为反应性质被称为键．

然后将每个键映射到一个按钮组件。这是一种简洁的遍历数组的方式为每一个并使用该值设置文本而且关键属性(您必须设置一个键属性以使DOM对象唯一!)您将使用文本来渲染按钮。

组件/ Button.js：

进口反应从“反应”；进口风格从“styled-components /本机”；/* https://kylewbanks.com/必威滚blog/react-native-tutorial-part-2-designing-a-calculator *//* https://github.com/styled-components/styled-components/issues/149 */常量ButtonBox＝风格．TouchableHighlight．attrs（｛underlayColor：# 193441的，｝）｀flex：1；对齐项目：中心；justify-content：中心；背景颜色：rgb（39，41，43）；这个特性：10px；保证金：5px；｀；常量ButtonText＝风格．文本｀字体大小：30.；字体类型：Orbitron-Bold；颜色：$ {道具= >道具．文本= =“走”?“绿色”：“橙色”｝；｀；handleButtonPress＝（价值）= >｛｝；出口默认的按钮＝（｛文本｝）= >（<ButtonBoxonPress＝｛（）= >handleButtonPress（）｝><ButtonText文本＝｛文本｝>｛文本｝</ButtonText></ButtonBox>）；

这是最后一个部分。首先创建一个ButtonBox就像整个按钮的容器一样。它在使用TouchableHighlight这是一个React Native组件，当触摸时会改变颜色。样式是正常的，除了底层颜色(触摸时看到的颜色)，因为这需要黑客工作在样式组件．

接下来，你有ButtonText这是一个文本控件。安装Orbitron-Bold从谷歌字体对于这个。颜色是使用布尔检查设置的(样式组件的另一个伟大的特性，全css支持)。本质上，如果文本是“Go”，颜色将是绿色，否则是橙色。

接下来，定义一个函数来处理按钮按下(目前为空)，然后导出按钮将两者结合起来的组件。设置文本属性ButtonText使用属性设置on按钮这样当你设置样式时，“样式组件”就可以看到它。

完成后，您将看到应用程序呈现的效果，如本文开头所示。

为Android应用添加颜色

当你在实际手机上查看Android模拟器时，它的颜色可能并不总是匹配的。这是因为安卓奥利奥固定色彩管理确保不同设备上的东西看起来是一样的。如果你有类似的问题，看看你是否使用Android 7或之前的版本。

你可以限制你的用户使用Android 8或更高版本，但目前这只是大约20%的安卓用户所以最好是在某个地方发布一个消息，在以后的版本中看起来会更好一些。

在React中连接你的按钮

这就是基本的设计和布局。现在您需要连接按钮，以便它们实际执行某些操作。首先，您需要按下数字(和清除键)从数字显示中添加和删除数字。

为此，你需要理解React中的状态。

升降状态

我们需要当前数字(要显示的)的一个真实源和修改它的回调函数。它必须是两者的父结点输入和按钮)．因为这是应用程序的一部分，你可以把它放到应用程序组件App.js．

从修改开始App.js并将其转换为React类(从当前的函数定义)您需要它来捕获状态．

进口反应从“反应”；进口｛容器，头，输入，键盘，ButtonRow｝从”。/组件的；类应用程序扩展反应．组件｛渲染（）｛返回（<容器><头>主要的组件</头><输入>123456</输入><键盘><ButtonRow键＝｛［' 1 '，' 2 '，“3”］｝/><ButtonRow键＝｛［“4”，“5”，“6”］｝/><ButtonRow键＝｛［“7”，“8”，“9”］｝/><ButtonRow键＝｛［' 0 '，“清楚”，“去”］｝/></键盘></容器>）；｝｝出口默认的应用程序；

应用程序现在是JavaScript ES6类，它有一个呈现()方法，返回JSX。

重新加载模拟器/应用程序(在模拟器中您可以使用R+R)，它仍然会像以前一样呈现。

现在在你的上面添加以下内容呈现()方法:

构造函数（道具）｛超级（道具）；这．状态＝｛数量：123456｝；｝

您正在重写反应的构造函数，调用父对象(这是必须的)，然后将状态设置为一个带有一个成员的JSON对象:数量(我们已将其初始化为旧值:123456)。

现在把这个加到返回(…)在App.js：

常量｛状态｝＝这；

这变性州从这变成一个局部变量。改变<输入>行<输入> {state.number} > < /输入．现在输入正在从状态中呈现。重新加载，您应该会看到相同的输出(并更改状态构造函数以看到它的变化)。

在React中修改状态

现在，您需要告诉每个按钮调用App类中定义的函数。将以下内容添加到构造函数中:

这．新闻＝这．新闻．绑定（这）；

这将使新闻函数有权访问这(这是你打电话时需要的this.setState)．

接下来，定义一个press函数，它只是提醒哪个按钮被按下。

新闻＝（价值）= >｛警报（价值）；｝；

现在将这个函数传递给你的按钮行:

<ButtonRow函数＝｛这．新闻｝键＝｛［' 1 '，' 2 '，“3”］｝/><ButtonRow函数＝｛这．新闻｝键＝｛［“4”，“5”，“6”］｝/><ButtonRow函数＝｛这．新闻｝键＝｛［“7”，“8”，“9”］｝/><ButtonRow函数＝｛这．新闻｝键＝｛［' 0 '，“清楚”，“去”］｝/>

修改ButtonRow接收此值并将其传递给被创建对象按钮年代。

出口默认的ButtonRow＝（｛函数，键｝）= >（<RowBox>｛键．地图（关键= >（<按钮函数＝｛函数｝文本＝｛关键｝关键＝｛关键｝/>））｝</RowBox>）；

最后,改变按钮接收此函数并按下按钮调用它。您还可以删除前面的按钮处理程序。

出口默认的按钮＝（｛函数，文本｝）= >（<ButtonBoxonPress＝｛（）= >函数（文本）｝><ButtonText文本＝｛文本｝>｛文本｝</ButtonText></ButtonBox>）；

现在，当你按下一个按钮，你应该看到一个警告，你按:

你现在有了一个单独的函数，定义在前，它控制按钮的功能。

在React中正确使用类属性

你可以在React中使用类属性来初始化状态。只需取出构造函数并将其替换为:

状态＝｛数量：123456｝；

更新React原生应用程序显示

当按下号码按钮时，您需要将所述号码添加到当前号码。另外,当清晰的按下你就得删除。先做这个。改变按()致以下:

新闻＝（价值）= >｛让｛数量｝＝这．状态；如果（价值＝＝＝“清楚”）｛数量＝数学．地板上（数量/10）；这．设置状态（｛数量｝）；｝｝

首先，这将使用析构从状态中提取数字的值(使用之前的linter，您将看到它是首选的)。如果钥匙是清晰的，将数字除以10，取底(即去掉最后一位数字)，然后设置状态。这应该足以使清除按钮工作。

现在在if语句中添加以下内容按()：

其他的如果（价值! =“去”& &数量<1000000）｛数量+ =价值；这．设置状态（｛数量｝）；｝

因此,如果去没有被按下并且值小于一百万(你必须在某个地方停下来-手机没有那么快)，将值添加到后面(将其解释为字符串而不是整数)，然后再次设置状态。这样每个按钮都能正常工作。

唯一要做的就是去按钮。

为Android应用添加屏幕

当去按钮被按下，你想隐藏键盘，并显示一个进度屏幕。为此，您需要另一个状态变量，一个布尔值，所以将它添加到状态类属性，即。

状态＝｛数量：123456，处理：假｝；

还添加一个检查去在新闻功能:

其他的如果（价值＝＝＝“去”）｛这．设置状态（｛处理：真正的｝）；｝

然后创建组件/ Processing.js：

进口反应从“反应”；进口风格从“styled-components /本机”；常量ProcessingBox＝风格．文本｀flex：6；字体大小：30.；text-align：中心；text-align-vertical：中心；字体类型：Orbitron-Bold；颜色：红色的；背景颜色：rgb（29，31，33）；padding-top：10px；padding-bottom：10px；｀；出口默认的（）= >（<ProcessingBox>处理</ProcessingBox>）；

将其添加到您的组件/ index.js：

出口｛默认的作为处理｝从“/处理。”；

然后在你的App.js：

进口｛容器，头，输入，键盘，ButtonRow，处理｝从”。/组件的；

并使用处理布尔值来决定是渲染它还是键盘:

｛状态．处理?（<处理/>）：（<键盘><ButtonRow函数＝｛这．新闻｝键＝｛［' 1 '，' 2 '，“3”］｝/><ButtonRow函数＝｛这．新闻｝键＝｛［“4”，“5”，“6”］｝/><ButtonRow函数＝｛这．新闻｝键＝｛［“7”，“8”，“9”］｝/><ButtonRow函数＝｛这．新闻｝键＝｛［' 0 '，“清楚”，“去”］｝/></键盘>）｝

这个检查是否state.processing为true，如果是，则显示处理过程。否则，显示键盘。

计算质因数

将一个数分解为质因数的最简单方法是从2到的所有数循环num / 2(因为任何大于num / 2不是因子)然后检查它是否能除。但是，第4条呢?它不是质数。所以我们还要检查每个因子是否为质数。

介绍了一种巧妙的算法在这里．从2开始，继续除法全国矿工工会对每一种情况加2直到不能除为止。

而（全国矿工工会％2= =0）｛addFactor（2）；全国矿工工会＝全国矿工工会/2；｝

现在全国矿工工会会是奇数。从3开始同样的过程，除了直到的平方根全国矿工工会，加2(仅限奇数):

为（int我＝3.；我< =数学．地板上（数学．√6（全国矿工工会））；我+ =2）｛而（全国矿工工会％我= =0）｛add_factor（我）；全国矿工工会＝全国矿工工会/我；｝｝

注意，在处理平方根这样的东西时，你必须在JavaScript中使用floor，因为JavaScript中所有的数字都是浮点数(实际上是双精度)。

同样地，把除数作为因数一直加下去，直到没有余数为止。

最后一步是检查剩余的数字是否大于1。如果是，那一定是质数!

如果（全国矿工工会>1）｛add_factor（全国矿工工会）；｝

你很快就会把这些组合起来。

现在已经有了显示结果所需的代码。

在React Native中显示列表

要显示列表，你需要使用React Native列表视图，在我们的转换中，aFlatList．它接受一个值(对象)列表数据以及渲染每个项目的方法renderItem．

<FlatList数据＝｛［｛关键：“一个”｝，｛关键：“b”｝］｝renderItem＝｛（｛项｝）= ><文本>｛项．关键｝</文本>｝/>

改变组件/ Processing.js致以下:

进口反应从“反应”；进口｛FlatList｝从“react-native”；进口风格从“styled-components /本机”；常量ProcessingBox＝风格．视图｀flex：6；背景颜色：rgb（29，31，33）；padding-top：10px；padding-bottom：10px；｀；常量头＝风格．文本｀字体大小：30.；text-align：中心；text-align-vertical：中心；字体类型：Orbitron-Bold；颜色：红色的；padding-top：10px；｀；常量项＝风格．文本｀字体大小：20.；text-align：中心；text-align-vertical：中心；字体类型：Audiowide-Regular；颜色：耐火砖；｀；出口默认的（）= >（<ProcessingBox><头>处理</头><FlatList数据＝｛［｛关键：' 2 '｝，｛关键：' 2 '｝，｛关键：“3”｝，｛关键：“5”｝］｝renderItem＝｛（｛项｝）= ><项>｛项．关键｝</项>｝/></ProcessingBox>）；

所以你有一个ProcessingBox,一个头和一个项它们在导出中被组合。单击后应看到以下内容去：

整合React原生应用

为了让这个工作与应用程序，你需要从外部控制渲染，所以改变渲染方法如下:

出口默认的（｛运行，因素，新闻｝）= >（<ProcessingBox>｛运行?（<头>处理</头>）：（<头>完成了</头>）｝<列表数据＝｛因素｝renderItem＝｛（｛项｝）= ><项>｛项．关键｝</项>｝/>｛！运行& &（<按钮函数＝｛（）= >新闻（“回来”）｝文本＝“返回”/>）｝</ProcessingBox>）；

在这里，控件接受三个变量，分别控制显示哪个标头、显示质数因子和用于切换父状态的函数(按下按钮时使用的相同函数)。

FlatList已被替换为列表它只是一个样式化的组件，用来控制列表呈现的大小。将以下内容添加到Processing.js：

常量列表＝风格．FlatList｀flex：5；｀；

还有一个按钮这是你自己的控制。用import {Button} from '.';．

现在我们继续App.js然后改变标签在呈现()”:

<处理运行＝｛状态．运行｝因素＝｛状态．因素｝新闻＝｛这．新闻｝/>

你传递了刚才讨论过的三个参数，前两个来自状态。现在更改state属性以包含这些新值:

状态＝｛数量：123456，因素：［］，处理：假，运行：假｝；

在这下面，在应用程序类中，输入用于计算质数的函数:

getPrimes＝（N）= >｛常量因素＝［］；让全国矿工工会＝N；而（全国矿工工会％2＝＝＝0）｛因素．推（｛关键：' 2 '｝）；全国矿工工会/ =2；｝让我；为（我＝3.；我< =数学．地板上（数学．√6（全国矿工工会））；我+ =2）｛而（全国矿工工会％我＝＝＝0）｛因素．推（｛关键：｀$ {我｝｀｝）；全国矿工工会/ =我；｝｝如果（全国矿工工会>1）｛因素．推（｛关键：｀$ {全国矿工工会｝｀｝）；｝返回因素；｝；

最后，更改新闻函数来获取这些因子并使用它们设置状态(以及正确响应回来处理画面按钮:

新闻＝（价值）= >｛让｛数量｝＝这．状态；如果（价值＝＝＝“清楚”）｛数量＝数学．地板上（数量/10）；这．设置状态（｛数量｝）；｝其他的如果（价值= = !“去”& &价值= = !“回来”& &数量<1000000）｛如果（数量＝＝＝0）数量＝价值；其他的数量+ =价值；这．设置状态（｛数量｝）；｝其他的如果（价值＝＝＝“去”）｛这．设置状态（｛处理：真正的｝）；让因素＝这．getPrimes（数量）；这．设置状态（｛运行：假｝）；这．设置状态（｛因素｝）；｝其他的如果（价值＝＝＝“回来”）｛这．设置状态（｛处理：假｝）；｝｝；

现在，当你运行应用程序并按下去您应该会看到质因数列表，以及回来按钮会带你回去。

编辑号码并重新单击去应该会得到一个新的因素列表。恭喜，你已经完成了应用程序!

设置Android应用程序名称和图标

为了让它在手机上部署后看起来更好，你需要设置名称和图标。你可以在里面输入名字android / app / src / main / res / / strings.xml值：

<资源><字符串的名字＝＂app_name＂>主要组件字符串>资源>

对于图标，最好在Android Studio中打开项目(使用安卓目录)，并创建一个' drawable '目录资产．然后右键点击新建->镜像资产．这将允许您导入大图标并覆盖ic_launcher它是用于启动器图标的，生成你在Play Store所需的所有版本。重新部署与react-native运行android你应该在你的应用程序列表中看到一个正确的名称和图标。

如果你下次跑步时遇到捆绑问题react-native运行android当在Android上运行时，有一个堆栈溢出修复这工作。

使用AppAuth添加身份验证

身份验证可能不是计算器的关键任务，但在应用程序功能保持简单的情况下添加身份验证通常是明智的。当您添加功能时，您可能想让用户选择保存计算历史记录或与朋友共享他们的工作。这些特性需要Okta简化的安全用户管理。

首先添加一个新的Login.js组件的复制Button.js将字体大小改为20，边框半径和边距改为0，背景颜色改为浅色Rgb (49,51,53)．

进口反应从“反应”；进口风格从“styled-components /本机”；常量ButtonBox＝风格．TouchableHighlight．attrs（｛underlayColor：# 193441的，｝）｀flex：1；对齐项目：中心；justify-content：中心；背景颜色：rgb（49，51，53）；这个特性：0；保证金：0；｀；常量ButtonText＝风格．文本｀字体大小：20.；字体类型：Orbitron-Bold；颜色：橙色；｀；出口默认的登录＝（｛函数，文本｝）= >（<ButtonBoxonPress＝｛（）= >函数（文本）｝><ButtonText文本＝｛文本｝>｛文本｝</ButtonText></ButtonBox>）；

添加到index.js在components目录的顶部导入它App.js并添加loggedin:假到应用程序类的状态。最后，在<输入>控件在渲染中放置一个开关来决定在登录按钮上打印什么:

｛状态．loggedin?（<登录文本＝“注销”/>）：（<登录文本＝“登录”/>）｝

当您重新运行项目时，应该会看到一个新的登录按钮。

注意:如果您没有看到代码中反映的任何更改react-native运行android部署它可能是因为您删除了Internet权限AndroidManifest.xmlReact Native使用它来连接应用程序和开发机器。只需将其替换在应用程序指令:

<uses-permissionandroid:的名字＝＂android.permission.INTERNET＂/>

接下来，你需要注册一个免费的Okta开发帐户．然后登录并导航到Applications >添加应用．选择本地的并点击下一个．选择名称，单击完成．注意你的登录重定向URI和客户机ID因为你必须把它们添加到你的应用程序中。

现在安装react-native-app-auth把它连起来。

react-native安装react-native-app-auth@4.0.0 react-native链接react-native-app-auth

现在将以下内容添加到defaultConfig部份安卓配置在android / app / build.gradle，用你的底座重定向URL,如。com.oktapreview.dev - 628819．

defaultConfig {applicationId "com. com。prime_components”…manifest占位符= [appAuthRedirectScheme: "{redirectBase}"]}

在你的顶部App.js进口警报从React Native包和授权而且撤销App Auth包:

进口｛警报｝从“react-native”；进口｛授权，撤销｝从“react-native-app-auth”；

在定义你的应用程序类，添加配置变量与你的Okta应用程序的细节:

常量配置＝｛发行人：“https:// {yourOktaDomain} / oauth2 /违约”，clientId：“{clientId}”，redirectUrl：“{redirectUrl}”，additionalParameters：｛｝，作用域：［openid的，“配置文件”，“电子邮件”，“offline_access”］｝；

你可以找到的值{yourOktaDomain}当您登录Okta仪表板时。

现在添加accessToken:“添加到状态初始化，并将以下两个函数添加到应用程序类:

状态＝｛.．.accessToken：”，｝；.．.授权＝异步（）= >｛试一试｛常量authState＝等待授权（配置）；这．设置状态（｛loggedin：真正的，accessToken：authState．accessToken｝）；｝抓（错误）｛警报．警报（“登录失败”，错误．消息）；｝｝；撤销＝异步（）= >｛试一试｛常量｛状态｝＝这；等待撤销（配置，｛tokenToRevoke：状态．accessToken，sendClientId：真正的｝）；这．设置状态（｛accessToken：”，loggedin：假｝）；｝抓（错误）｛警报．警报（“撤销令牌失败”，错误．消息）；｝｝；

最后添加func = {this.authorize}作为登录按钮上的属性func = {this.revoke}到注销按钮。

｛状态．loggedin?（<登录文本＝“注销”函数＝｛这．撤销｝/>）：（<登录文本＝“登录”函数＝｛这．授权｝/>）｝

现在当你重新运行并点击登录您应该被重定向到Okta登录屏幕。使用附加到您的Okta应用程序的用户的登录详细信息应该重定向到您的应用程序，现在显示注销按钮。当您单击登出，然后再次登录时，您将注意到不会提示您再次登录。要解决这个问题，您可以添加登录提示additionalParameters．

常量配置＝｛.．.additionalParameters：｛提示：“登录”｝，作用域：［openid的，“配置文件”，“电子邮件”，“offline_access”］｝；

这确保每次都提示用户输入密码。

在Play Store上发布Android应用

最后一步是在Play Store上发布你所创造的内容。标准文档有这方面的建议很好同时发射前检查表．除了阅读开发者策略(这是你应该做的)，你还需要注册一个开发者帐户还要付25美元的挂号费。然后你需要创建一个图标。

为你的Android应用创建一个图标

制作一些独特且引人注目且与应用相关的内容并不容易标志性的(Play Store上的一个移动应用程序)，它可以链接到免费的图标库，并让你编辑它们。用它你可以创建像下面这样的图形:

在Play Store控制台创建一个Android应用程序

打开播放控制台并单击创建应用程序．选择默认语言，输入名称，单击创建．你现在会在商店列表中看到很多你需要填写的东西，包括最少的:

• 简短的描述
• 很长的描述
• 两个截图
• 一个功能的图形
• 高分辨率图标(512×512)
• 分类(应用类型和类别)
• 电子邮件地址

您还需要指定是否提供隐私策略。

对于功能图形，您需要的内容恰好是1024×500。你可以从Pixabay(例如这一个)，尽管你必须调整它们的大小Gimp(并且在Pixabay上确保图片是免费的商业用途!)

完成后点击保存草稿你应该在旁边的侧板上看到一个大的绿色勾存储清单．

这表明您已经完成了列表细节，仍然需要填写内容评级表单以及定价和分发。但在此之前，你需要先发行应用。

应用程序版本

点击应用程序发布在侧栏中。的列表跟踪用于各个测试阶段。点击管理在生产轨道上。然后单击创建发布．

您将看到一条关于使用的消息应用程序签名谷歌Play．这是一个新功能，它把管理密钥到谷歌的手中。你想要这样做的原因很简单:如果你管理自己的密钥，而你失去了它们，你将不再能够为你的应用发布更新。事实上，你必须以一个新的名称创建一个新的!但是，请注意这是一个选项。在这里你将使用它。为此，你需要生成上传密钥．

• 在Android Studio中打开应用程序安卓你的React Native项目文件夹
• 去生成签名包/ APK
• 选择APK并点击下一个
• 下密钥存储路径点击创建新的
• 选择一条像这样的路/home/karl/keystores/android.jks
• 为密钥库和密钥选择密码
• 输入证书信息(注意:这不会显示在应用程序中，只有证书)

点击好吧并点击下一个．同时选择V1和V2签名版本并点击完成．构建应该开始后，您应该看到两者app-x86-release.apk而且app-armeabi-v7a-release.apk里面的android / app /释放在您的项目中(每个设备架构一个)。

如果你现在尝试上传这些应用程序，你会得到一个错误，说“你的应用程序正在使用需要隐私政策的权限”。这是因为React Native在后台添加应用程序权限．要强迫它们不被包括在内，你必须先添加xmlns:工具= " http://schemas.android.com/tools "到清单的元素android / app / src / main / AndroidManifest.xml然后添加以下内容(详见之前的链接):

<uses-permission工具:节点＝＂删除＂android:的名字＝＂android.permission.READ_PHONE_STATE＂/><uses-permission工具:节点＝＂删除＂android:的名字＝＂android.permission.WRITE_EXTERNAL_STORAGE＂/><uses-permission工具:节点＝＂删除＂android:的名字＝＂android.permission.READ_EXTERNAL_STORAGE＂/>

您也可以删除警报窗口和互联网uses-permission因为我们不用它们。重新构建和重新上传。放入一些发行说明，然后单击保存．

内容评级

现在发布后，您可以输入评级信息。去内容评级在侧栏中，阅读关于IARC的信息并单击继续．

对于类型，单击“Utility”在底部。然后会有一份问卷。所有字段都可以单击“**No**”。点击保存问卷．在此之后，您可以单击计算评级．你会看到一个关于你的应用如何被评价的列表。滚动到底部并单击应用评级”。

旁边应该打个勾内容评级．唯一剩下的就是定价和分销。

定价和分销

这部分也应该是直截了当的，因为你不收费你的应用程序可用按钮，以选择所有可用的143个国家。然后为儿童定向和包含广告选择no。然后勾选“内容指南”和“美国出口法律”复选框并单击保存草稿．

在Play控制台的顶部，它应该说准备发布．

发布Android应用

去应用程序发布并点击编辑发布．滚动到底部并单击审查．点击开始转出到生产．点击确认．你的应用程序现在应该说即将出版在顶端。你现在需要等待几个小时，谷歌检查你的应用程序，然后再发布它。

注意:首先使用测试版本可能是值得的，以确保在发布到生产之前一切正常，即面向所有人!

了解更多关于Android, React Native和安全用户管理

恭喜!您刚刚使用React Native完成了选择、设计和开发一个Android应用程序，并将其发布到Play Store。我希望本教程对您有所启发。去做点有用的东西，然后发表出来!

如果你有兴趣学习更多关于应用程序设计，React Native或使用Okta安全用户管理的知识，请查看以下资源:

• 创建一个没有IDE的基本Android应用程序
• 使用TypeScript和OAuth 2.0构建和测试React Native应用程序
• 使用OAuth 2.0构建React Native应用程序和认证

你今天学到了什么?关注我们在推特上，像我们一样在Facebook上，看看我们在LinkedIn,请订阅我们的YouTube频道．