美文网首页
React-Native android端添加启动页

React-Native android端添加启动页

作者: S__J | 来源:发表于2018-03-05 15:25 被阅读86次

    使用RN编写完简单的第一版应用后,才发现还没有添加启动图,各种查找如何添加,不过资料不多再加上好多已经过时过程还是比较痛苦的,所以把这个过程记录下来。

    使用react-native-splash-screen开源组件,地址https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md

        第一步(项目根目录运行):npm i react-native-splash-screen --save
        第二步:react-native link react-native-splash-screen,安装完成后,就会自动在android项目里面自动添加需要的代码了,
        第三步:修改android/app/src/main/java/com/APPNAMES(你自己的项目名)/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 的布局文件来自定义你的启动屏幕,注意这里面背景图的名字是:launch_screen,其实就是drawable-xhdpi,drawable-xxhdpi,drawable-xxxhdpi.......里的launch_screen.png,也就是我们最后要看到的启动图

           <?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>
    

    原生端基本写完了,然后就是RN项目里面写隐藏啦,在注册的入口文件里引入:import SplashScreen from 'react-native-splash-screen',
    然后加上RN的生命周期方法,渲染完成后就隐藏掉启动图

            componentDidMount() {
                  SplashScreen.hide(); // 隐藏启动图
            }
    

    然后一个简单的启动图就加完了,其实按照官网的流程已经很详细了,按照那个走就没问题,欢迎大神交流指点

    相关文章

      网友评论

          本文标题:React-Native android端添加启动页

          本文链接:https://www.haomeiwen.com/subject/syjhfftx.html