这是一个具有Redux&Local Auth&React Navigation内置的Create-React-React-native-App样板。
create-react-native-app-redux-auth生成了一个新的React Antival应用程序的所有基础文件,其中Redux插入了(用于状态管理)以及React Navigation和React Navigation和本地身份验证!
您可以使用React Native中的所有组件和API,以及Expo应用程序提供的大多数JavaScript API。
create-react-native-app-redux-auth !可以在这里找到完整的书面教程。
该项目用Create React Native App和FSG进行了引导。



确保您已安装了节点V6,以及移动设备上的Expo Client 2.5.0的当前版本,以支持React Native 0.55。不需要XCode或Android Studio安装。
$ npm install -g create-react-native-app-redux-auth可以以几种不同的方式使用create-react-native-app-redux-auth命令行工具。
$ create-react-native-app-redux-auth只需在目录中运行create-react-native-app-redux-auth即可generated包含新应用程序文件的子文件夹。
另外, create-react-native-app-redux-auth可以采用文件路径(相对或绝对,甚至还不存在),并且它将使用/创建目标文件夹,并用新的应用程序文件填充它。
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer如果您已经制成并将cd到达目录中,并且想用新的应用程序填充它,请使用.小路。
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder!生成文件后,请确保在项目root中运行以下命令( generated/除非您使用如上所述的路径参数):
$ npm install快速启动,只需更改2件事:
package.json中。json,将“名称”更改为应用程序的名称。IP.js中,将IP更改为后端的完整IP地址,无论是在localhost:PORT还是部署的某个地方,例如Heroku。为了启用内置的本地身份验证,生成的项目假定运行数据库。您必须将服务器配置为Redux的Axios调用:
${IP}/auth/login {电子邮件:电子邮件,密码:passwass}的请求。${IP}/auth/signup提出发布请求。${IP}/auth/logout提出删除请求。 $ npm start感谢您的演奏!哈语。 ?
下面您会找到有关执行常见任务的信息。本指南的最新版本可在此处找到。
您只需要非常少有地更新create-react-native-app的全局安装,理想情况下从未更新。
更新应用程序的react-native-scripts依赖性应该就像撞到package.json中的版本编号一样简单。
升级到新版本的React Native需要更新react-native , react和expo软件包版本,并在app.json中设置正确的sdkVersion 。有关软件包版本兼容性的最新信息,请参见版本指南。
如果在初始化项目时安装了纱线,则将通过纱线安装依赖项,并且您可能还应使用它来运行这些命令。与依赖性安装不同,在撰写本文时,命令运行语法对于YARN和NPM相同。
npm start在开发模式下运行您的应用程序。
在手机上的Expo应用程序中打开它以查看。如果将编辑保存到文件中,它将重新加载,您将在终端中看到构建错误和日志。
有时,您可能需要重置或清除React Native Packager的缓存。为此,您可以将--reset-cache标志传递给开始脚本:
npm start --reset-cache
# or
yarn start --reset-cache
npm test在您的测试中运行嘲笑测试跑者。
npm run ios就像npm start一样,如果您在Mac上并安装了它,也尝试在iOS模拟器中打开您的应用程序。
npm run android就像npm start一样,但也尝试在连接的Android设备或模拟器上打开您的应用程序。需要安装Android构建工具(有关详细设置,请参见React Native Docs)。我们还建议将基因应作为您的Android仿真器。设置本机构建环境后,有两种选择可用于创建adb的正确副本来创建React Antive App:
adbSettings -> ADB 。选择“使用自定义Android SDK工具”,然后使用您的Android SDK目录进行更新。 adb/Applications/Genymotion.app/Contents/MacOS/tools/ 。npm run eject这将启动从Create React Antive App的构建脚本中“弹出”的过程。您会询问有关如何构建项目的几个问题。
警告:运行弹出是一个永久的操作(除了您使用的任何版本控制系统之外)。弹出的应用程序将要求您建立XCode和/或Android Studio环境。
您可以编辑app.json以在expo密钥下包含配置键。
要更改应用程序的显示名称,请在app.json中设置expo.name键为适当的字符串。
要设置应用程序图标,请在app.json中设置expo.icon键为本地路径或URL。建议您使用具有透明度的512x512 PNG文件。
该项目设置为使用开玩笑进行测试。您可以配置自己喜欢的任何测试策略,但是开west可以解决。在称为__tests__的目录中创建测试文件,或使用.test扩展名为Jest加载的文件。有关示例测试,请参见“模板”项目。开玩笑的文档也是一个很棒的资源,React Native Testing教程也是如此。
您可以使用环境变量来配置某些Create React Antive App的行为。
启动项目时,您会为您的项目URL看到类似的东西:
exp://192.168.0.2:19000
该URL上的“清单”告诉Expo应用如何检索和加载应用程序的JavaScript捆绑包,因此,即使您通过exp://localhost:19000这样的URL将其加载到应用程序中,Expo Client App仍然会尝试在IP地址上试图在IP地址中检索您的应用程序。
在某些情况下,这不是理想的。如果您需要在虚拟机内运行项目,并且必须通过与默认情况下打印的IP地址访问包装器,则可能是这种情况。为了覆盖由Create React Antive App检测到的IP地址或主机名,您可以通过REACT_NATIVE_PACKAGER_HOSTNAME Environment varrible指定自己的主机名:
MAC和Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
视窗:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
上面的示例将导致开发服务器在exp://my-custom-ip-address-or-hostname:19000 。
Create React Native App在使应用程序设置和开发简单明了地做了很多工作,但是在不依赖托管服务的情况下将其部署到Apple的App Store或Google的Play商店时,很难做到这一点。
Expo为CRNA创建的仅JS的应用程序提供免费托管,使您可以通过Expo Client应用程序共享应用程序。这需要注册世博帐户。
安装exp命令行工具,然后运行发布命令:
$ npm i -g exp
$ exp publish
如果您想获得IPA/APK,而无需自己构建本机代码,则还可以使用Expo的独立构建等服务。
如果您想自己构建和部署应用程序,则需要从CRNA弹出并使用Xcode和Android Studio。
这通常就像在项目中运行npm run eject一样简单,这将使您完成整个过程。确保安装react-native-cli并遵循本机代码入门指南的React Native指南。
如果您在研究项目时使用了Expo API,那么如果您驱逐到常规的React Native项目,这些API呼叫将停止工作。如果要继续使用这些API,则可以弹出“ React Antions + Expokit”,这仍然可以允许您构建自己的本机代码并继续使用Expo API。有关此选项的更多详细信息,请参见弹出指南。
如果您由于网络超时或拒绝连接而无法将应用程序加载到手机上,那么第一步是验证您的手机和计算机是否在同一网络上,并且可以互相联系。 Create React Antive App需要访问端口19000和19001,因此请确保您的网络和防火墙设置允许在这两个端口上从设备访问计算机。
尝试在手机上打开Web浏览器,并打开Packager脚本打印的URL,用http:// exp:// //。因此,例如,如果在终端中的QR码下方,则可以看到:
exp://192.168.0.1:19000
尝试在手机上打开Safari或Chrome并加载
http://192.168.0.1:19000
和
http://192.168.0.1:19001
如果这有效,但是您仍然无法通过扫描QR码来加载应用程序,请在Create React React Angie App存储库上打开一个问题,其中包含有关这些步骤以及您可能收到的任何其他错误消息的详细信息。
如果您无法将http URL加载到手机的Web浏览器中,请尝试使用手机上的Tethering/Mobile Hotspot功能(虽然要当心数据使用情况),将计算机连接到该WiFi网络,然后重新启动包装器。如果您使用的是VPN,则可能需要将其禁用。
如果您在Mac上,则在尝试npm run ios时,用户有时会看到一些错误:
您可能需要采取一些步骤来解决这些错误:
Command Line Tools菜单选项设置为某物。有时,当Homebrew首先安装CLI工具时,此选项是空白的,这可以防止Apple实用程序找到模拟器。这样做后,请确保重新运行npm/yarn run ios 。Reset Contents and Settings...之后,退出模拟器,然后重新运行npm/yarn run ios 。如果您无法扫描QR码,请确保手机的相机正常聚焦,并确保终端中两种颜色的对比度足够高。例如,WebStorm的默认主题可能没有足够的对比度,无法与Expo App使用的系统条形码扫描仪一起扫描终端QR码。
如果这会给您带来问题,则可能需要尝试更改终端的颜色主题以具有更多的对比度,或者运行从其他终端创建React Antive应用程序。您还可以在Expo应用程序的搜索栏中手动输入Packager脚本打印的URL以手动加载它。