023.解决启动白屏和amp;和amp;清除日志

引入插件

yarn add react-native-splash-screen

android配置

• 在android/app/src/main/res/layout文件夹下创建启动页的XML文件launch_screen.xml并添加如下代码

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

增加drawable-xxhdpi文件夹并加入launch_screen文件

• 在android/app/src/main/res/values目录中,新建colors.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimaryDark">#FFFFFF</color>
</resources>

• 修改android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <!-- 添加. -->
        <item name="android:windowIsTranslucent">true</item>
    </style>
   
</resources>

• 在MainActivity.java文件下添加以下代码

import android.os.Bundle;  //add 
import org.devio.rn.splashscreen.SplashScreen; //add

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this); // add
        super.onCreate(savedInstanceState);
    }
}

• 在rn中配置SplashScreen.hide

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

 componentDidMount() {
    SplashScreen.hide()
 }
 //也可以在首页等其他地方关闭

ios配置

cd ios && pod install
使用xcode 打开.xcworkspace文件，按照ios开发步骤使用xcode生成图片，可自行百度

清除日志

/**
 * @format
 */

import { AppRegistry, LogBox } from 'react-native';
import 'react-native-gesture-handler';
import App from './src'; //程序的入口 src目录下的index.jsx
import { name as appName } from './app.json';

//去除react-native-gesture-handler使用旧API警告
LogBox.ignoreLogs([
    "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
])

//重置 清除打印日志

if (!__DEV__) {
    const emptyFunc = () => {}
    global.console.info = emptyFunc
    global.console.log = emptyFunc
    global.console.warn = emptyFunc
    global.console.error = emptyFunc
}

AppRegistry.registerComponent(appName, () => App);

这篇好文章是转载于：学新通技术网