wenhui5628 / readit Goto Github PK

1、开发者菜单中选择"Debug JS Remotely"选项
2、自动打开调试页面 http://localhost:8081/debugger-ui（可做断点调试)
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 => 吐司控件，前往

使用的是和风天气API

使用react-native-geolocation-service第三方库，获取经纬度进行高德逆地理编码API调用，获取城市，虚拟机需要开启google play服务，需要有处理获取位置的服务程序app/services/location，以及修改android/src/main/AndroidManifest.xml，添加<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 安卓添加权限。

对于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",目前使用上仍有问题。

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-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/kotlin-error-when-build-or-install/38868

参考： https://stackoverflow.com/questions/56808518/android-gradlew-assemblerelease-sourcemap-output-fail-because-bundle-doesnt-e