React Native 中设置 APP 名称、图标和启动页 |
您所在的位置：网站首页 › 更换app名字和图标怎么改 › React Native 中设置 APP 名称、图标和启动页 |
APP 开发完成后，我们需要修改 APP 名称并设置好应用图标和启动页，然后再发布上线。其中，名称和图标用于标识 APP，而启动页则可以增强应用程序启动时的用户体验、品牌推广等。本文总结了如何在 React Native 应用中完成名称、图标和启动页的设置。 修改名称应用程序的名称默认是使用 react-native-cli 创建项目时的名称。修改的方式很简单，找到相应的配置然后修改即可。例如，我初始化的项目名称叫 test，现在想修改成 测试程序。 Android编辑 android/app/src/main/res/values/strings.xml 文件： - test + 测试程序 iOS编辑 ios/test/Info.plist 文件： CFBundleDisplayName - $(PRODUCT_NAME) + 测试程序 修改应用图标应用图标对尺寸有要求，比较简单地方式是准备一张 1024*1024 的图片，然后使用图标工厂在线生成。 我这里直接从 Sketch iOS 图标设计模板中选取了一张图片，生成后的结果如下： android_icon.png ios_icon.png我们可以直接用生成好的内容替换默认的图标即可。 Android 替换 android/app/src/main/res 下对应的图标。 iOS 替换 ios/test/Images.xcassets/AppIcon.appiconset 中的内容。如果不需要全部尺寸，可以用 XCode 打开项目，点击 Images.xcassets>AppIcon 拖入相应尺寸的图标。 添加启动页添加启动页可以使用 react-native-splash-screen 库，通过它可以控制启动页的显示和隐藏。 $ yarn add react-native-splash-screen $ react-native link react-native-splash-screen Android编辑 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 // react-native-splash-screen < 0.3.1 import com.cboy.rn.splashscreen.SplashScreen; // here public class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // here super.onCreate(savedInstanceState); } // ...other code }在 android/app/src/main/res/layout 文件夹下创建启动页布局文件 launch_screen.xml： 将启动页图片放置在 drawable 文件夹下。 drawable-ldpi drawable-mdpi drawable-hdpi drawable-xhdpi drawable-xxhdpi drawable-xxxhdpiAndroid 会自动缩放 drawable 下的图片，所以我们不必为所有分辨率的设备准备启动图。 完成上述操作后，重新打包应用，再启动时就可以看到启动页了。不过，启动页显示之前会有短暂的白屏，我们可以通过设置透明背景来处理。编辑 android/app/src/main/res/values/styles.xml 文件，修改如下： + true iOS编辑 ios/test/AppDelegate.m 文件： #import "AppDelegate.h" #import #import #import "RNSplashScreen.h" // here @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ...other code [RNSplashScreen show]; // here return YES; } @end用 XCode 打开项目，选中 LaunchScreen.xib 中的 View，取消选中 Use Launch Screen。 cancel_launch_screen.png选中项目，在 General 配置中设置 Launch Images Srouce，点击 Use Asset Catalog，弹出对话框中使用默认即可（此操作会在 Images.xcassets 中创建 LaunchImage），然后设置 Launch Screen File 为空。 use_asset_catalog.png点击 Images.xcassets > LaunchImage，在右侧属性栏处选择要支持的设备。接着，添加对应分辨率的图片，分辨率对照如下： 设备 分辨率 iOS 11+ 1125*2436 iOS 8+ Retina HD 5.5 1242*2208 iOS 8+ Retina HD 4.7 750*1334 iOS 7+ 2x 640*960 iOS 7+ Retina 4 640*1136 iOS 5,6 1x 320*480 iOS 5,6 2x 640*960 iOS 5,6 Retina 4 640*1136 ios_launch.png完成上述操作之后，重新安装 APP 再启动时就可以看到启动页。 隐藏启动页到目前为止，可以发现打开 APP 后会一直停留在启动页面，我们可以在合适的时机（如所有资源准备完毕）调用 SplashScreen.hide(); 来隐藏启动页。 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; }); |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |