react native 添加启动页并解决启动白屏问题
2017-08-31 11:55
691 查看
react native 添加启动页并解决启动白屏问题
一般实现方式有3种:1,使用RN开源组件: https://github.com/stoneWeb/elm-react-native (github 饿了么开源项目)
2,原生代码编写:https://github.com/wangdicoder/react-native-Gank (github开源项目)
3,模拟启动页,这种方法基本就是replace路由栈:https://git.oschina.net/LC_github_io/MyReduxDemo
我们之所以设置启动页,很大一部分原因是在启动页显示的背后可以利用宝贵的时间来初始化我们的应用,启动页消失后,初始化的工作就应该做完。因此,使用开源RN组件是比较靠谱的,闲言少叙,直奔主题!
我们使用rn-splash-screen组件,其他组件比如react-native-splash-screen和react-native-splashscreen等配置过程都会出现很多坑,只有这个坑最少。
react-native-splash-screen还是星星最多的,只不过初次配置太多问题了,以后有时间再回来收拾他。
使用步骤:
安装 npm install --save rn-splash-screen
连接 react-native link rn-splash-screen
在res文件中新建drawable文件夹,放置splash.png;
修改android/app/src/main/res/values/styles.xml文件,添加一行:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> + <item name="android:windowBackground">@drawable/splash</item> </style>5.修改android/app/src/main/AndroidManifest.xml文件:
android:name=".MainApplication" android:allowBackup="true" android:label="@string/app_name" - android:icon="@mipmap/ic_launcher" - android:theme="@style/AppTheme"> + android:icon="@mipmap/ic_launcher"> <activity android:name=".MainActivity" android:label="@string/app_name" + android:theme="@style/AppTheme" android:configChanges="keyboard|keyboardHidden|orientation|screenSize"> <intent-filter> <action android:name="android.intent.action.MAIN" />
6.修改Android/app/src/main/Java/com/APPNAMES/MainActivity.java文件:
import android.graphics.Color; import android.os.Bundle; import com.facebook.react.ReactInstanceManager; import com.facebook.react.bridge.ReactContext; import com.mehcode.reactnative.splashscreen.SplashScreen; public class MainActivity extends ReactActivity { // [...] @Override protected void onCreate(Bundle savedInstanceState) { // Show the js-controlled splash screen SplashScreen.show(this, getReactInstanceManager()); super.onCreate(savedInstanceState); // [...] } // [...] }
7.在入口文件中测试:
rn-splash-screen提供了两个API,open()和hide()。
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; // 引入引导页组件 import SplashScreen from 'rn-splash-screen'; export default class splashTest extends Component { constructor(props){ super(props); this.state = {}; } componentDidMount() { setTimeout(() => { SplashScreen.hide(); }, 2000); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('splashTest', () => splashTest);
注意:React-native run-android过程中很一直报错,如果按照以上方法修改的话,是没有问题的(RN
0.43),有效的办法是编译之前删除android\app\build文件夹下的四个文件夹,这样就不会重复报错了。
修改APP得名字:直接打开android/app/src/main/res/values/strings.xml,即可看到配置中的app_name,修改为你想要的即可:
<resources> <string name="app_name">Hello</string> </resources>
修改APP得图标在android\app\src\main\res\mipmap-xxxxxx中直接覆盖图标就可以,注意图标的大小。
最终效果图:
最后附上大神关于优化哒方案:
1,ReactNative安卓首屏白屏优化,2. 设置SplashScreen
https://github.com/SpikeKing/LearningRN (同一篇,有gif图 http://www.jianshu.com/p/08f296eb67e4)
参考:安卓白屏优化
https://github.com/cnsnake11/blog/blob/master/ReactNative%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC/ReactNative%E5%AE%89%E5%8D%93%E9%A6%96%E5%B1%8F%E7%99%BD%E5%B1%8F%E4%BC%98%E5%8C%96.md
##################################################
性能优化
1.探索react native首屏渲染最佳实践
http://web.jobbole.com/85451/
2. QQ空间终端开发团队 https://zhuanlan.zhihu.com/p/20587485
3.React
Native 性能优化建议
http://www.ghugo.com/react-native-high-performance/
相关文章推荐
- android开发主界面 WindowBackGround 添加启动页显示解决白屏问题
- Android 添加启动页 解决应用启动时白(黑)屏问题
- React Native 启动白屏问题解决方案,教程
- Flutter Android端启动白屏问题的解决
- Android 启动白屏问题解决
- 解决APP启动白屏或者黑屏闪现的问题
- android 启动页启动慢或白屏的解决方法
- Android 冷启动解决白屏问题
- Android中Splash应用启动白屏问题的解决方法
- Android的App启动时白屏的问题解决办法
- 快速解决ionic安卓主题启动时短暂的黑屏或白屏问题
- Android 性能优化——解决应用启动白屏/黑屏问题
- Android开发之解决APP启动白屏或者黑屏闪现的问题,androidapp
- 无法启动此程序,因为计算机中丢失QtCore4.dll。尝试重新安装该程序以解决此问题(在系统里添加3个路径)
- 【开源自动化测试疑难FAQ】【WebDriver】WebDriver启动时白屏挂起问题解决方法(二)
- 解决Android应用启动时白屏或者黑屏的问题
- 启动应用的白屏问题解决方案
- APP 启动白屏 解决 4.4 onstart 不运行 的问题
- App启动页-加载一张图片以及解决白屏或者黑屏问题
- Myeclipse添加外部Tomcat出现启动故障的问题解决