zoukankan      html  css  js  c++  java
  • React Native 设置APP名称、logo图标、启动页

     
    APP 开发完成后,我们需要修改 APP 名称并设置好应用图标和启动页,然后再发布上线。其中,名称和图标用于标识 APP,而启动页则可以增强应用程序启动时的用户体验、品牌推广等。本文总结了如何在 React Native 应用中完成名称、图标和启动页的设置。
     
     
    下面都是关于Android端的操作,IOS的话,看我上面参考资料的链接
     

    1. 修改名称
    编辑 android/app/src/main/res/values/strings.xml 文件

    <resources>
    -    <string name="app_name">test</string>
    +    <string name="app_name">测试程序</string>   
    </resources>

    2. 修改应用图标

    替换 android/app/src/main/res 下对应的图标。

    注意:里面有两个图片文件,一个不能少,名字也要相同

     推荐使用这个工具只需要拖拽一张图片,就可以迅速生成你需要各种大小的图片 :https://icon.wuruihong.com/ ,附上这个工具的图片,记得“可选参数”你要微调一下

    3. 设置启动页(我参考的资料,有几处,由于react native更新版本,有些问题,我将其改正)

    步骤一,

     yarn add react-native-splash-screen  //不需要手动link,版本高的自动链接 

    步骤二,编辑androidappsrcmainjavacom 下面的 MainActivity.java   添加以下代码

    import android.os.Bundle; // here
    import com.facebook.react.ReactActivity;
    // react-native-splash-screen >= 0.3.1
    import org.devio.rn.splashscreen.SplashScreen; // here
    
    
    public class MainActivity extends ReactActivity {
        // ...other code
       @Override
        protected void onCreate(Bundle savedInstanceState) {
            SplashScreen.show(this);  // here
            super.onCreate(savedInstanceState);
        }   
    }

    步骤三,在android/app/src/main/res/layout 文件夹下创建启动页布局文件 launch_screen.xml:(layout不存在自己手动创建)

    <?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_image">
    </LinearLayout>
    
    // 只需要注意  android:background="@drawable/launch_image"这行, launch_image是你启动图片的名字

    步骤四,通过工具制作好不同规格的启动页图片 ,放进 androidappsrcmain esdrawable 文件夹下 (drawable文件夹不存在,则手动创建)

    步骤:成上述操作后,重新打包应用,再启动时就可以看到启动页了。不过,启动页显示之前会有短暂的白屏,我们可以通过设置透明背景来处理。编辑 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>

    步骤六:隐藏启动页
    到目前为止,可以发现打开 APP 后会一直停留在启动页面,我们可以在合适的时机(如所有资源准备完毕)调用 SplashScreen.hide(); 来隐藏启动页。

    // index.js文件操作
    import { AppRegistry } from 'react-native';
    import SplashScreen from 'react-native-splash-screen';
    
    import App from './App';
    import { name as appName } from './app.json';
    
    AppRegistry.registerComponent(appName, () => {
      SplashScreen.hide();
      return App;
    });
  • 相关阅读:
    【luogu P1343 地震逃生】 题解
    【luogu P3931 SAC E#1
    【luogu P3275 [SCOI2011]糖果】 题解
    【luogu P2947 [USACO09MAR]向右看齐Look Up】 题解
    【luogu P1456 Monkey King】 题解
    【luogu P3377 左偏树(可并堆)】 模板
    【luogu P1993 小K的农场】 题解
    Sqlmap注入Base64编码的注入点
    kali高速更新源以及主题修改方法
    DiscuzX3.1搬家全过程
  • 原文地址:https://www.cnblogs.com/tengyuxin/p/11861046.html
Copyright © 2011-2022 走看看