Learn the front end together to record all the problems that were bothering me before they were solved in Android

Project situation

There have been two recent Android projects by ReactNative

1. A hardware control through serial port and TCP communication

2. One is the Webview of WebRTC

Problems faced

1.Boot from the rev.

2.Full screen display (hide statusBar navigationBar)

3.A serial port communication

4.Obtain local IP(wired network IP)

5.TAB switch lag (5s to render)/ performance issues

6.Download files to usb flash drive



7.Webview does not trust SSL certificates

8.Webview can't play video automatically

9..

Copy the code

How to solve the problem

1. Startup failure

// Since I have not done Android development, I was confused about this problem for a long time
// The overall process is divided into two steps: 1. Start the Activity after receiving the broadcast
/ / 1. In the Java/com/project under the new bootBroadcastReceiver. Java
package com.record; // Here is the name of my project package
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;

public class BootBroadcastReceiver extends BroadcastReceiver {
    static final String ACTION = "android.intent.action.BOOT_COMPLETED"; // The boot is complete
    @Override
    public void onReceive(Context context, Intent intent) {
        if (intent.getAction().equals(ACTION)) {
            Intent mainActivityIntent = new Intent(context, MainActivity.class);  // The Activity to startmainActivityIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); context.startActivity(mainActivityIntent); }}}// 2. Add/register to receive in androidmanifest.xml
<receiver android:name="com.record.BootBroadcastReceiver" // This corresponds to the class name of the broadcast receiver
    android:enabled="true"
    android:exported="true"
    android:permission="android.permission.RECEIVE_BOOT_COMPLETED">
        <intent-filter android:priority="2147483647"> // Here is the weight I wrote the highest
            <action android:name="android.intent.action.BOOT_COMPLETED"/>
            <category android:name="android.intent.category.LAUNCHER" />
            <category android:name="android.intent.category.HOME" />
        </intent-filter>
</receiver>
Copy the code

2. The problem of full-screen display

// Full screen displays are more than just hiding statusBar and navagationBar
// The navagationBar will be brought out when the soft keyboard is up and hidden when the soft keyboard is down
// This section can be found in the Android developer documentation
// Declare a hideNavagation function in mainactivity. Java

 private void hideNavigationBar(a) {
    int uiOptions = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
    getWindow().getDecorView().setSystemUiVisibility(uiOptions);
  }

// Call it when full screen is required
// When to call it? 1. OnCreate 2. UI changes (soft keyboard will cause interface changes)
@Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    hideNavigationBar();

    View decorView = getWindow().getDecorView();
    decorView.setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
        @Override
        public void onSystemUiVisibilityChange(int visibility) { hideNavigationBar(); }}); }Copy the code

3. The serial port communication is abnormal

This can only rely on third-party plug-in libraries
I currently use the library: https://github.com/bastengao/react-native-serial-port-api was used and some mistakes on making mention of the issue and find the author's weibo to bosses communication changes after released the 1.1.0 version Blue... Blue... blue...Copy the code

Take a look at the actual usage code

  let serialPath = '/dev/ttyS4';
  let serlialPort = SerialPortAPI.open(serialPath, { baudRate: 115200.dataBits: 8.stopBits: 1.parity: 0 }).then(serialPort= > {
      // toast. success(' serial ${serialPath} succeeded ', 2);
      // Listen to receive data
      this.sub = serialPort.onReceived(buff= > {
         let data = buff.toString('hex');
      })
      // Send data
      serialPort.send('C06162C3C0').then(res= > {
          // if (res) {
          // toast. success(' send serial data successfully ')
          // }
      }).catch(err= > {
         console.log(err);
      })
   }).catch(err= > {
      Toast.fail(` serial port${serialPath}Link failed '.1)})Copy the code

4. Obtain the local cable IP address

This problem was never solved but then we did another Electron project and we got another solution
// The IP address obtained from the broadcast and the IP address obtained from the ifconfig can be compared$node boardcast.js{address: '192.168.0.108', family: 'IPv4', port: 19991, size: 21}
$ifconfig | grep inetInet 127.0.0.1 netMask 0xFF000000 InET6 ::1 prefixLen 128 Inet6 fe80::1%lo0 prefixLen 64 scopeid 0x1 Inet6 Fe80 ::86: F9F3:1A29: FA05 % EN0 PrefixLen 64 Secured ScopEID 0x4 INET 192.168.0.108 netmask 0xFFffFF00 Broadcast 192.168.0.255 inet6 fe80: : c068: abff: feae: 7 ab7% awdl0 prefixlen 64 scopeid 0 by 8 inet6 fe80: : c068: abff: feae: 7 ab7% llw0 prefixlen 64 scopeid 0x9 inet6 fe80::9188:920e:25c:508f%utun0 prefixlen 64 scopeid 0xa inet6 fe80::b76c:3efa:7a58:a35c%utun1 prefixlen 64 scopeid 0xbCopy the code

5. TAB switching is stuck

On the RK3399, Antutu’s running results show that it beat 1% of phones, but the requirement is that it must be smooth and constrained by the fact that it is not possible to be smooth without native development
// The cause of the problemThe reason for the lack of fluency is the poor performance of the phone//Minimize rendering as much as possible// Solution
1.  1 | 2 | 3 | 4 | 5 // 5 tabs show only the current and sides of the content, the rest is empty components
2. 当3The component that currently has content when displayed is234The rest are empty components3.Displays the current component and allows for fast rendering while swiping left and right/ / successFollowing the above solution, the rendering time was reduced from 5s to 1s to display the full Tab contentCopy the code

6. Download the file to the USB flash drive

1.Optimal scheme to detect the plug and unplug OF the U disk directly write files into the U disk have reference examples such as Thunderbolt download can be directly downloaded to the U disk

2.The difficulty is that RN has no plug-ins available and no native development capabilities

Finally, the compromise is chosen by sending the download command to tell C_server to download

Copy the code

7. The Webview

The requirement of Webview project is to make a WebRTC Android project and also need to conduct AI identification on RTC stream. Screenshot operation cannot be carried out on RN Stream, only Webview can be selected
1.How to skip SSL@Override
    public void onReceivedSslError(final WebView webView, final SslErrorHandler handler, final SslError error) {
        handler.cancel();// Change to the following code
        handler.proceed(); // Ignore SSL and continue execution
    }

2.Video cannot be played automatically mediaPlaybackRequiresUserAction Boolean value, whether the control before the HTML 5 audio and video playback requires the user to click. The default istrueSet tofalseCan beCopy the code

Write in the last

RN about Android application development because do not understand Android development will be other problems bit by bit continue to accumulate

My official account and QQ group



The public,