rn android log文件,RN_shiMeng: 这是用react native 写的一个公开性Android的小项目 ，主要是用来学习Rn的编写， 目前没有后台 ， 我会一步一步完善它 ，...

RN 一个简单的项目开发流程

提示

请想确定您的电脑上配置的有React Native的运行环境如果没有请在 react Native官网上参考配置

通过包管理工具yarn下载node_modules

首次运行时在项目根目录运行 react-native run-android 启动项目

之后再运行则通过 react-native start 即可，除非修改了 andriod内文件则需要重新编译

通过dev Settings 在 Degug server host & port for device 中配置服务器，即运行电脑的IP地址和端口号:8081

开启Debug JS Remotrly模式能够更好的帮助你调试app，(但会影响app运行性能)

初始化项目并允许到手机上进行开发调试

运行 react-native init shiMeng 初始化项目结构

运行 adb devices 查看时候连接设备

运行 react-native run-android 把项目部署到手机上调试

把运行于手机上的 项目，配置一下 Packager Server 从而保证能够正常的刷新最新的代码

初始化页面逻辑

创建app文件夹 里面存放js代码

assets 用于存放静态文件

components 用于存放公共组件

pages 用于存放页面js

services用于存放请求(目前不会用得到)

utility 用于存放公共的方法

配置 路由相关的 信息

运行 yarn add react-native-router-flux 安装路由模块

在项目的根组件中，导入 路由模块，并得到需要的路由 组件

创建路由规则的嵌套关系

配置tabBar 底部导航

运行 yarn add react-native-tab-navigator 安装路由模块

导入 tab 栏组件 import TabNavigator from 'react-native-tab-navigator

配置ui库

yarn add @ant-design/react-native

yarn add @ant-design/icons-react-native

react-native link @ant-design/icons-react-native 第2 ，3 步是为了解决ui字体图标不显示的问题

页面配置

main.js 增加tabBar

开始写 Star 页面

在 RN 中 console.log() 不起作用

console.warn(this.props)

console.warn(JSON.stringify(this.props, null, ' '))

定义utility/dict 把图片地址到里面 ，本地的地址只能 放在require("../assets/starImage/13.jpg"),中 ，且requie只接受字符串 ， 当为线上地址时可以拼接Uri

画 starDetail 页面

star 加 ant 的 Carousel 组件

Home 页面

yarn add react-native-swiper 轮播图组件

定义轮播图组件

九宫格布局

修改路由设置

本来本应用是 react-native-router-flux作为路由 但是RN'推荐的是react-Navigation 所以我们用RN推荐的

本文使用的是 react-Navigation@3.12.1 版本 (目前最高为 4X 版本) 详情请参照官网

首先下载路由 yarn add react-navigation@3.12.1 目前本项目中只是用3.12.1版本，更高版本配置不同，知悉..

新建 RootStackNav.js 用于存放路由

自定义 返回按钮 (目前没有使用，只用作参考 )

因为tabBar 是用ant写的 没有经过navigation 所以要在页面传入导航

调整home/index导航

react-Navigation报错

Cannot read property 'Direction' of undefined

原因：react-Navigatio的版本和RN的版本不符合。

RN-API StatusBar 使用

可以参照官方网站用法

render() {

// 渲染页面

return

}

utility

dict.js 定义常量

-utility.js 定义js方法(目前只有自适应)

签名打包发布Release版本的apk安装包

如何发布一个apk

先保证自己正确配置了所有的 RN 环境

在 cmd 命令行中，运行这一句话keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

其中： my-release-key.keystore 表示你一会儿要生成的那个 签名文件的 名称【很重要，要找个小本本记下来】

-alias 后面的东西，也很重要，需要找个小本本记下来，这个名称可以根据自己的需求改动my-key-alias

当运行找个命令的时候，需要输入一系列的参数，找个口令的密码，【一定要找个小本本记下来】

当生成了签名之后，这个签名，默认保存到了自己的用户目录下C:\Users\liulongbin\my-release-key.keystore

将你的签名证书copy到 android/app目录下。

编辑 android -> gradle.properties文件，在最后，添加如下代码：

MYAPP_RELEASE_STORE_FILE=your keystore filename

MYAPP_RELEASE_KEY_ALIAS=your keystore alias

MYAPP_RELEASE_STORE_PASSWORD=*****

MYAPP_RELEASE_KEY_PASSWORD=*****

编辑 android/app/build.gradle文件添加如下代码：

...

android {

...

defaultConfig { ... }

+ signingConfigs {

+ release {

+ storeFile file(MYAPP_RELEASE_STORE_FILE)

+ storePassword MYAPP_RELEASE_STORE_PASSWORD

+ keyAlias MYAPP_RELEASE_KEY_ALIAS

+ keyPassword MYAPP_RELEASE_KEY_PASSWORD

+ }

+}

buildTypes {

release {

...

+ signingConfig signingConfigs.release

}

}

}

...

进入项目根目录下的android文件夹，打开终端，然后输入./gradlew assembleRelease开始发布APK的Release版；

当发行完毕后，进入自己项目的android\app\build\outputs\apk目录中，找到app-release.apk，这就是我们发布完毕之后的完整安装包；就可以上传到各大应用商店供用户使用啦；

注意：请记得妥善地保管好你的密钥库文件，不要上传到版本库或者其它的地方。

相关文章

React Native 小米(红米)手机安装失败、白屏 Failed to establish session 解决方案

React Native Android 初次试用遇到的各种坑

Redux 中文文档

react-native 在使用require加载本地图片时报Unexcepted character

React Native for Android 发布独立的安装包