(Android)解决react-native打包好后启动白屏的问题(react-native-splash-screen)
来源:互联网 发布:python tcp 保持连接 编辑:程序博客网 时间:2024/06/10 00:50
在写应用时,遇到了打包好的app启动白屏的问题,多方询问找到的解决方法是添加一个启动屏。用封装好的react-native-splash-screen组件。
react-native-splash-screen组件的官方网址:https://github.com/crazycodeboy/react-native-splash-screen
1、在项目中安装该组件
npm i react-native-splash-screen --save
或者
yarn add react-native-splash-screen --save
2、配置启动文件
① 在android/settings.gradle文件中
include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
② 在android/app/build.gradle文件中
dependencies { ... compile project(':react-native-splash-screen')}
③ 在android/app/src/main/java/.../MainApplication文件中
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new SplashScreenReactPackage()//添加这句 ); }注意用Android Studio打开并按Alt + Enter键进行引包。
④在MainActivity.java 文件中加入
public class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // 添加这句 super.onCreate(savedInstanceState); } // ...other code}不要忘记引包。
⑤ 在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:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/launch_screen"></LinearLayout>
注意:如果想对各个屏幕尺寸的手机做兼容需要在以下文件夹中设置对应的图片。
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
⑥ 在android/app/src/main/res/values/styles.xml文件中
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <!--设置透明背景 添加下面这句--> <item name="android:windowIsTranslucent">true</item> </style></resources>
3、在项目的js文件中使用该组件,例如在入口文件中,意思是启动完毕后隐藏启动页。
import SplashScreen from 'react-native-splash-screen'export default class WelcomePage extends Component { componentDidMount() { // do stuff while splash screen is shown // After having done stuff (such as async tasks) hide the splash screen SplashScreen.hide(); }}
4、此时就解决了白屏的问题,可以打包看一下效果。
5、若想使展现启动屏时隐藏状态栏可以在SplashScreen.java文件中
将下图所示的代码
改为:
阅读全文
0 0
- (Android)解决react-native打包好后启动白屏的问题(react-native-splash-screen)
- react-native-splash-screen的坑--android
- 有效好用组件之启动屏react-native-splash-screen
- react-native-splash-screen的心酸历程
- 使用react-native-smart-splash-screen实现启动画面
- react-native-splash-screen 不支持 react-native 0.47.1
- react-native开发Android启动白屏的问题
- React-native android 启动遇到的问题
- React native 启动白屏解决
- React-Native打包发布(Android)
- React-Native打包发布(Android)
- React-Native打包发布(Android)
- React-Native打包发布(Android)
- 【React Native】Android打包发布(九)
- React Native Android打包
- React Native 红屏问题的解决
- React Native带你从源码解决启动白屏(Android)
- React Native启动白屏问题
- 人脸识别:(抓拍+识别)
- String Split 获取空值--limit参数作用
- 对于相同喜好的用户,电商高手用Spark MLlib代码如何操作?
- [列联相关] 列联系数计算及假设检验
- JAVA中字符串比较equals()和equalsIgnoreCase()的区别
- (Android)解决react-native打包好后启动白屏的问题(react-native-splash-screen)
- SLAM 的初步学习(一)--ubuntu14.04 下安装 opencv3.2
- oracle多表联合查询加gruop by处理
- teamviewer连接无桌面linux
- Java对象在Java虚拟机的创建过程
- Redis介绍以及安装(Linux)
- Docker的web端管理平台对比(DockerUI 、Shipyard、Portainer、Daocloud)
- 晶体管电路设计 上 铃木雅臣 学习体会
- 几个常见的程序错误