react native Android启动页面、修改图标、修改名字、修复启动白屏
2017-04-22 10:01
681 查看
给Android添加启动页
实现启动页基本有三种思路:
使用RN开源组件;原生java编写;
模拟启动页,这种方法基本就是replace路由栈;http://www.jianshu.com/p/da658aceeb44
我们之所以设置启动页,很大一部分原因是在启动页显示的背后可以利用宝贵的时间来初始化我们的应用,启动页消失后,初始化的工作就应该做完。因此,使用开源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">随遇而安</string> </resources>
修改App的图标
也很简单,在android\app\src\main\res\mipmap-xxxxxx中直接覆盖图标就可以,注意图标的大小。
最终效果图:
app.gif
修复Android启动白屏的问题,后续会加上,敬请期待。。。。。
相关文章推荐
- react-native android app名字、图标和启动图片设置
- react-native 生成的android 及IOS 对应图标修改地址
- react-native开发Android启动白屏的问题
- React Native Android的启动白屏/闪屏的原因,解决方案,原理,使用方法
- React Native for Android应用名及图标修改
- React-Native开发App,修改图标和名字
- react-native--Android名字,图标,包名
- React-Native 之 GD (十)Android启动页面 及 模态方式跳转
- React Native带你从源码解决启动白屏(Android)
- android开发之提高应用启动速度_splash页面瞬间响应_避免APP启动闪白屏
- 【React Native 学习笔记】React Native For Android程序白屏
- 解决android在启动闪屏页面前会出现短暂的白屏或黑屏状态
- React Native之ViewPagerAndroid跳转页面问题
- android提高应用启动速度_splash页面瞬间响应_避免APP启动闪白屏
- 修改Android应用程序的名字和图标
- 原生Android项目中集成React native页面
- react-native 设置android版本启动图
- Cocos2d-x Android修改ICON名字、更改图标、修改屏幕方向、修改版本号
- React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用
- android开发之提高应用启动速度_splash页面瞬间响应_避免APP启动闪白屏