ReadIT, a light reading app, Chronicles my trip to the RN pit

background

ReadIT, a light reading application, supports the following functions: high-quality article push, comment like, plan making, plan alarm clock, weather forecast, collection of articles, depth of two sets of themes, multi-language switch, aurora push and other functions. The integration will continue in the future. Both the front and rear ends are independently developed, drawing lessons from the better seed engineering in the market, which has not been applied in the market at present. There are also few articles, and high-quality articles will continue to be added in the future. Welcome to try it.

Display effect

Am I

Download experience (Currently android only)

Github

Github.com/xiaobinwu/r…

The skill tree

1. Client (react-native, @react-Navigation, React-Native third-party libraries, typescript, Mobx, marked, etc.)

2. Central platform back management system (ANTD4, React, REdux, React-Router4, Hook and other technologies)

3. Back-end programs (KOA, mongoDb, JsonWebToken, Ali-OSS and other technologies)

React-devtools Debugging

1, the developer menu, select “Debug JS Remotely” option 2, automatically open the Debug page http://localhost:8081/debugger-ui (as a breakpoint debugging) 3, open the exception is suspended (Pause On Caught Exceptions) options, can get a better development experience 4, set the environment variable ELECTRON_MIRROR = ‘https://npm.taobao.org/mirrors/electron/’, 5, Install react-devtools, package.json, and configure NPM script. Adb reverse TCP :8097 TCP :8097 7. Current react-native => 0.61.5. React -devtool => 3.6.3

Note: React-DevTools V4 requires React-Native 0.62 or higher to work properly. Report error as soon as upgrade, follow up

Iconfont font icon used

1, download the Iconfont icon project, download it locally, and obtain Iconfont. TTF 2, put it in the SRC/Assets /fonts directory 3, configure react-native-config. js, refer to the following:

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

4. Run NPM run link Add the corresponding iconfont. TTF to iOS (Fonts provided by info.plist) Add a line under the application iconfont. The vera.ttf), Android (copy to app/SRC/main/assets/fonts folder, And app/SRC/build. Gradle add configuration) 5, will iconfont. Json copy to SRC/components/common/iconfont 6, fonts icon package should refer to step 4 directory relative component files in July and resources: resources

Tsconfig. Json configuration

Json. If the configuration fails, add package.json to the SRC directory

{
  "name": "@app"
}
Copy the code

Third-party libraries

1, autobind-decorator => automatically bind methods to class instances, additional plugin needed for babel7 as follows:

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

Mobx/mobx-react => simple, scalable state management @react navigation/bottom-tabs / @react navigation/native / @react navigation/stack => Go to 4, React-native appearance => access OS appearance information on iOS, Android, and the Web. React Native localize => React Native localize => React Native localize 6, @react-native community/async-storage => simple, asynchronous, persistent key-value storage system React-native ActionSheet => cross-platform Actionsheet; react-native WebView => webView; Go to 9, marked => markdown compiler, go to 10, highlight.js => code highlighting tool, React -native- autoheight-webView => React -native-image-viewing => react-native-image-viewing React-native-root => figure 14 React-native => Calendar Jcore-react-native => jpush-react-native => jcore-react-native => jpush-react-native => 17. React-native amap-geolocation => Aude address service. 18. React-native device-info => Device information. 19, react-native image-picker => upload image, 20, react-native modal-datetime-picker => time picker, Go to 21. React-native picker-select => dropdown box selector. Go to 22. React-native splash-screen => App startup diagram

Third party library lies pit

How to obtain the current weather and the weather in the next three days?

The API of zephyr weather is used, which requires warp and weft entry, so the location must be obtained first and the appKey of zephyr weather needs to be applied.

Push service

Aurora push services jcore-react-native and Jpush-react-Native require an AppKey.

How do I get a location?

Part1: Use the react-native-geolocation-service third-party library to obtain latitude and longitude for Autonavi reverse geocoding API call, obtain the city, and start Google Play service. App /services/location (see react-native-geolocation-service github example) And modify the android/app/SRC/main/AndroidManifest. XML, Add < USES – the permission of the android: name = “android. Permission. ACCESS_FINE_LOCATION” / > android add permissions. As a result, Google Play service cannot be used in China, so this scheme has to be abandoned and the corresponding app/services/location will be deleted.

Part2. Use the React-native amap-geolocation third-party library, interface documentation, and usage guide

Image uploading problem

For the react-native image-picker third-party library, for version 3.1.4, minSdkVersion must be at least 21. Modify minSdkVersion configuration for Android /build.gradle

Aliyun-oss-rn NPM package aliyun-oss-RN NPM package aliyun-oss-RN NPM package aliyun-OSs-RN NPM package Androidmanifest.xml, add Android :allowBackup=”true”, there are still some problems in the current use, so give up this solution, use oss postObject direct transmission mode, reference resources, Upload with STS temporary authorization, policy, and 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:+'
}
  
  
Copy the code

Calendar problem

The react-native calendar Agenda is as follows: 1. During internationalization switch, theme switch, the calendar does not switch correspondingly, so HACK processing method should be adopted accordingly. Set key to the Agenda component, force the component to uninstall and reload. This will cause the View component onLayout within the Agenda component to trigger repeatedly (I don’t need it to be triggered all the time), which will lead to the constant change of this.viewHeight, resulting in the inaccurate positioning of each animation execution. The solution is to use a variable to store this.viewHeight, and the sample code is as follows:

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(); }};Copy the code

3. The Agenda list is modified to display only the Agenda of the currently selected date. The code of the Agenda component is modified as follows:

  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, 'Selected time');

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


Copy the code

The alarm clock problem

React-native-alarm-clock: currently, 1.0.0 cannot be downloaded from yarn and NPM, and version 2.0.0 can only be downloaded to the local PC to replace the corresponding NPM package in node_moudules. The use of this function has not been verified, and there are still problems.

Select the drop-down box question

React-native picker-select “RNCAndroidDialogPicker” was not found in the UIManager. Demote @react-native picker/picker to 1.8.3

Packaging APK problem

Administrator CMD, refer

#keytool -genkey -dname "CN=wushaobin,OU= personal,O= personal,L= Shenzhen,ST= Guangdong,C=CN" -alias test -keyalg RSA -validity 400000 -keystore test.keystore #keytool -importkeystore -srckeystore test.keystore -destkeystore test.keystore -deststoretype pkcs12 Keystore -storepass XXXXXXXXX or keytool -genkeypair -v -keystore test.keystore -alias test -keyalg RSA -keysize 2048 -validity 400000Copy the code

App startup diagram

1. Download react-native-splash-screen

2, android/app/SRC/main/Java/com/readit MainActivity. Java, configuration is as follows:

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"; } // add the following method + @override + protected void onCreate(Bundle savedInstanceState) {+ splashscreen.show (this); // here + super.onCreate(savedInstanceState); +}}Copy the code

3, android/app/SRC/main/res/layout/launch_screen. XML configuration (not just add) as follows:

<? The 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>Copy the code

4, android/app/SRC/main/res/values/styles. The XML configuration is as follows:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <! -- Customize your theme here. --> <item name="android:textColor">#000000</item> + <! - add this line -- -- > + < item name = "android: windowIsTranslucent" > true < / item > < / style >Copy the code

5. Use as follows:

import SplashScreen from 'react-native-splash-screen'; . componentDidMount() { SplashScreen.hide(); }Copy the code

App icon problem

Replace the android/app/SRC/main/res/mipmap – * folder icon image

Gradlew assembleRelease: /gradlew assembleRelease: /gradlew assembleRelease: /gradlew assembleRelease

Common commands./gradlew clean,./gradlew build

Compilation error: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build. Problem solution:

Reference: forums. Expo. IO/t/kotlin – er…

./gradlew assembleRelease failed to compile

Error message Error: ENOENT: no such file or directory, open ‘F:\Project\reactnative\readIt\android\app\build\generated\sourcemaps\react\release\index.android.bundle.map’

Solution: reference: stackoverflow.com/questions/5…

When releasing the version, delete itbuild/debug.apk, the implementation of./gradlew clean

React Native Android9.0 or higher does not provide a solution for HTTP requests

The resources