关于前端:一款轻阅读应用ReadIT记录我的RN躺坑之旅

3次阅读

共计 7288 个字符，预计需要花费 19 分钟才能阅读完成。

一款轻浏览利用 ReadIT，反对性能：优质文章推送、评论点赞、打算制订、打算闹钟、天气预报、珍藏文章、深浅两套主题、多语言切换、极光推送等性能。后续还会持续集成性能。前后端均自主研发，借鉴市面较好的种子工程，目前未上利用市场。

点我

https://github.com/xiaobinwu/…

1、客户端（react-native、@react-navigation、react-native 第三方库、typescript、mobx、marked 等技术）

2、中台后管零碎（antd4、react、redux、react-router4、hook 等技术）

3、后端程序（koa、mongoDb、jsonwebtoken、ali-oss 等技术）

1、开发者菜单中选择 ”Debug JS Remotely” 选项
2、主动关上调试页面 http://localhost:8081/debugge…（可做断点调试)
3、关上有异样时暂停（Pause On Caught Exceptions）选项，可能取得更好的开发体验
4、设置环境变量 ELECTRON_MIRROR='https://npm.taobao.org/mirrors/electron/'，避免下载react-devtool 卡住
5、装置 react-devtools，package.json 配置 npm script，执行npm run react-devtools
6、执行adb reverse tcp:8097 tcp:8097
7、目前 react-native => 0.61.5，react-devtool => 3.6.3
8、参考资料：参考资料

留神：react-devtools v4 须要 react-native 0.62 或更高版本能力失常工作。一降级就报错，后续跟进

1、下载 Iconfont 字体图标我的项目，下载至本地，获取 iconfont.ttf
2、放至src/assets/fonts 目录
3、配置react-native.config.js, 参考资料, 如下：

    module.exports = {
        project: {ios: {},
            android: {}, // grouped into "project"},
        assets: ["./src/assets/fonts/"], // stays the same
    };

4、运行 npm run link，将对应iconfont.ttf 别离增加至 iOS（Info.plist 中Fonts provided by application下增加一行 iconfont.ttf）、Android（复制至app/src/main/assets/fonts 文件夹中，并且 app/src/build.gradle 增加配置）
5、将 iconfont.json 复制至src/components/common/iconfont
6、字体图标封装可参考第 4 步目录绝对应组件文件
7、参考资料：参考资料

1、具体各个配置项解析，可查看 tsconfig.json
2、配置paths, 后果不起效，需在src 目录增加package.json，配置如下

{"name": "@app"}

1、autobind-decorator => 主动将办法绑定到类实例，针对 babel7 需额定配置插件，如下：

    {plugins:  ["@babel/plugin-proposal-decorators", { legacy: true}]
    }

2、mobx / mobx-react => 简略、可扩大的状态治理，返回
3、@react-navigation/bottom-tabs / @react-navigation/native / @react-navigation/stack => 跨平台导航计划，返回
4、react-native-appearance => 在 iOS，Android 和 Web 上拜访操作系统外观信息。目前反对检测首选配色计划（浅色 / 深色），返回
5、react-native-localize => 用于 React Native 利用本地化的工具箱，返回
6、@react-native-community/async-storage => 简略的、异步的、长久化的 Key-Value 存储系统，返回
7、react-native-actionsheet => 跨平台 ActionSheet，返回
8、react-native-webview => WebView, 旨在代替内置 WebView，返回
9、marked => markdown 编译器，返回
10、highlight.js => 代码高亮工具，返回
11、react-native-autoheight-webview => React Native 的主动高度 webview，返回
12、react-native-image-viewing => 图片滑动浏览控件，返回
13、react-native-root-toast => 吐司控件，返回
14、react-native-calendars => 日历
15、jcore-react-native、jpush-react-native => 极光推送
16、react-native-alarm-clock => 闹钟
17、react-native-amap-geolocation => 高德地址服务
18、react-native-device-info => 获取设施信息
19、react-native-image-picker => 上传图片
20、react-native-modal-datetime-picker => 事件选择器
21、react-native-picker-select => 下拉框选择器
22、react-native-splash-screen => 利用启动图

应用的是和风天气 API，须要经纬入参，所以必须先获取地位。

极光推送服务 react-native-jpush

Part1，应用 react-native-geolocation-service 第三方库，获取经纬度进行高德逆天文编码 API 调用，获取城市，开启 google play 服务，须要有解决获取地位的服务程序 app/services/location（参考react-native-geolocation-service github example），以及批改android/app/src/main/AndroidManifest.xml，增加<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 安卓增加权限。后果不行，针对 google play 服务国内不能应用，所以该计划得摒弃掉，对应app/services/location 会删除。

Part2，应用 react-native-amap-geolocation 第三方库，接口文档，使用指南

对于 react-native-image-picker 第三方库，对于 3.1.4 版本，minSdkVersion起码要 21 以上，在应用的 react-native 0.61.5 下，批改 android/build.gradle 的minSdkVersion配置

阿里 oss aliyun-oss-rn，须要更改aliyun-oss-rn npm 包的android/build.gradle（如下配置）, 进步 SDK 版本号，以及批改主我的项目AndroidManifest.xml, 增加android:allowBackup="true", 目前应用上仍有问题，于是放弃该计划，改用 oss postObject 直传形式，参考资料，应用 sts 长期受权、policy、Signature 配合上传。

buildscript {
    repositories {jcenter()
    }

    dependencies {classpath 'com.android.tools.build:gradle:1.3.1'}
}

apply plugin: 'com.android.library'

android {
    compileSdkVersion 28
    buildToolsVersion '28.0.3'

    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    lintOptions {abortOnError false}
}

repositories {mavenCentral()
}

dependencies {
    implementation 'com.facebook.react:react-native:+'
    implementation 'com.aliyun.dpa:oss-android-sdk:+'
}

react-native-calendars的 Agenda 问题如下：
一、国际化切换、主题切换时，日历没有对应切换，对应 HACK 解决办法，给 Agenda 组件设置 key，强制组件卸载，从新加载
二、Agenda在国际化切换、主题切换、增加日程的时候，会导致 Agenda 组件外部 View 组件 onLayout 反复触发（我是不须要其始终触发），导致 this.viewHeight 始终发生变化，导致每次动画执行定位不准问题，解决办法，用个变量存储this.viewHeight，示例代码如下：

let VIEW_HEIGHT = 0;

constructor(props) {this.viewHeight = VIEW_HEIGHT || windowSize.height;}

onLayout = event => {if (!VIEW_HEIGHT) {
        VIEW_HEIGHT = event.nativeEvent.layout.height;
        this.viewHeight = event.nativeEvent.layout.height;
        this.viewWidth = event.nativeEvent.layout.width;
        this.forceUpdate();}
};

三、日程列表革新，只显示以后选中日期的的日程，Agenda组件代码革新如下：


  renderReservations() {const reservationListProps = extractComponentProps(ReservationList, this.props);
    let reservations = {};
    const {items} = this.props;
    if (this.props.selected && items[this.props.selected.dateString]) {reservations = { [this.props.selected.dateString]: items[this.props.selected.dateString] };
    }
    console.log(this.props.selected, '选中的工夫');

    return (
      <ReservationList
        {...reservationListProps}
        ref={c => (this.list = c)}
        reservations={reservations}
        selectedDay={this.state.selectedDay}
        topDay={this.state.topDay}
        onDayChange={this.onDayChange}
        onScroll={() => {}}
      />
    );
  }

react-native-alarm-clock, 目前 yarn、npm 均不能下载 1.0.0，只能将2.0.0 版本下载至本地，替换 node_moudules 中的对应 npm 包，性能应用还未考据，仍有问题。

react-native-picker-select，报错信息 "RNCAndroidDialogPicker" was not found in the UIManager，参考 Issues，解决办法，降级@react-native-picker/picker 至 1.8.3

管理员 CMD，参考

#keytool -genkey -dname "CN=wushaobin,OU= 集体,O= 集体,L= 深圳,ST= 广东,C=CN" -alias test -keyalg RSA -validity 400000 -keystore test.keystore  
#keytool -importkeystore -srckeystore test.keystore -destkeystore test.keystore -deststoretype pkcs12  
#keytool -list -v -keystore test.keystore -storepass xxxxxxxxx  
或 keytool -genkeypair -v -keystore test.keystore -alias test -keyalg RSA -keysize 2048 -validity 400000

1、下载react-native-splash-screen

2、android/app/src/main/java/com/readit/MainActivity.java，配置如下：

import com.facebook.react.ReactActivity;

+ import org.devio.rn.splashscreen.SplashScreen;
+ import android.os.Bundle;

public class MainActivity extends ReactActivity {

  /**
@@ -12,4 +15,11 @@
  protected String getMainComponentName() {return "readIt";}

  // 增加上面办法
  + @Override
  + protected void onCreate(Bundle savedInstanceState) {+ SplashScreen.show(this);  // here
      + super.onCreate(savedInstanceState);
  + }
}

3、android/app/src/main/res/layout/launch_screen.xml配置如下(没有就增加)：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</LinearLayout>

4、android/app/src/main/res/values/styles.xml配置如下：

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        + <!-- 增加这一行 -->
        + <item name="android:windowIsTranslucent">true</item>
    </style>

5、应用如下：

import SplashScreen from 'react-native-splash-screen';

...

componentDidMount() {SplashScreen.hide();
}

替换 android/app/src/main/res/mipmap-* 文件夹中图标图片

./gradlew assembleRelease 失败问题
1、先执行./gradlew clean，卸载上一个 debug 版本
2、再执行./gradlew assembleRelease，生成人 release 版本

罕用指令 ./gradlew clean、./gradlew build

参考：https://forums.expo.io/t/kotl…

参考：https://stackoverflow.com/que…

公布版本时，删除`build/debug.apk`，执行`./gradlew clean`

参考资料

正文完

前端

发表至：前端

2021-04-05

0

关于前端:ts映射类型

关于前端:前端应该知道的开放图谱协议The-Open-Graph-protocol

关于前端:jsconfigjson到底是做什么的

关于前端:浅析-2D-组态与-25D-组态的区别-空调装配生产线与化工安全流程

关于linux:模拟-Amiibo无需-NTAG-215-卡

关于前端:一款轻阅读应用ReadIT记录我的RN躺坑之旅

背景

展现成果

下载体验（目前只有安卓版）

Github

技能树

react-devtools 调试（安卓模拟器）

iconfont 字体图标应用

tsconfig.json 配置

第三方库

第三方库躺坑

如何获取以后天气、将来三天天气？

推送服务

如何获取地位？

图片上传问题

日历问题

闹钟问题

抉择下拉框问题

打包 APK 问题

app 利用启动图

app 利用图标问题

The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build. 问题

./gradlew assembleRelease 失败 Error: ENOENT: no such file or directory, open ‘F:\Project\reactnative\readIt\android\app\build\generated\sourcemaps\react\release\index.android.bundle.map’ 问题

公布版本时，删除`build/debug.apk`，执行`./gradlew clean`

React Native Android9.0 以上打包 apk 后 http 申请不到解决办法

站内搜索

关于前端:一款轻阅读应用ReadIT记录我的RN躺坑之旅

背景

展现成果

下载体验（目前只有安卓版）

Github

技能树

react-devtools 调试（安卓模拟器）

iconfont 字体图标应用

tsconfig.json 配置

第三方库

第三方库躺坑

如何获取以后天气、将来三天天气？

推送服务

如何获取地位？

图片上传问题

日历问题

闹钟问题

抉择下拉框问题

打包 APK 问题

app 利用启动图

app 利用图标问题

The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build. 问题

./gradlew assembleRelease 失败 Error: ENOENT: no such file or directory, open ‘F:\Project\reactnative\readIt\android\app\build\generated\sourcemaps\react\release\index.android.bundle.map’ 问题

公布版本时，删除build/debug.apk，执行./gradlew clean

React Native Android9.0 以上打包 apk 后 http 申请不到解决办法

站内搜索

公布版本时，删除`build/debug.apk`，执行`./gradlew clean`