react native 啓動圖與圖標(以及APP名稱)

GitHub: https://github.com/crazycodeboy/react-native-splash-screen

安裝以及自動添加依賴

npm i react-native-splash-screen --save

react-native link react-native-splash-screen

---

手動添加

Android

1、在android/settings.gradle

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2、在android/app/build.gradle

dependencies {
      ...
      compile project(':react-native-splash-screen')
      ...
}

3、在 MainApplication.java

protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new SplashScreenReactPackage(), // 添加啓動頁代碼
    );
}

iOS

1、在 XCode中, 點擊項目，右鍵 Libraries ➜ Add Files to [your project's name],選中路徑 node_modules ➜ react-native-splash-screen and add SplashScreen.xcodeproj添加SplashScreen.xcodeproj

2、添加 libSplashScreen.a 到你的項目的 Build Phases ➜ Link Binary With Libraries

 

3、檢查 'RNSplashScreen.h' file not found, 選擇你的項目 → Build Settings → Search Paths → Header Search Paths to add:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

使用

Android

1、MainActivity.java

/**
 * 設置啓動頁
 */
@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this,true);  // 展示啓動頁設置代碼,true後面會用到
    super.onCreate(savedInstanceState);
}

2、添加啓動頁圖片

app/src/main/res 創建 layout 文件夾並且新建文件 launch_screen.xml

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

3、在 app/src/main/res 下創建如下文件夾，添加對應分辨率圖片，命名爲launch_screen

啓動圖尺寸及圖標尺寸: http://note.youdao.com/noteshare?id=c178d0de9eab22734816ee29cf277679

4、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>

 

iOS

1、AppDelegate.m

#import "AppDelegate.h"

...

#import "RNSplashScreen.h" // 導入啓動頁組件庫

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [self.window makeKeyAndVisible];
  [RNSplashScreen show]; // 添加啓動頁展示
  return YES;
}

@end

2、自定義啓動頁：用Xcode打開ios工程，選中Image.xcassets，空白處選擇 App Icons & Launch Images ➜ New ios Launch Image , 完成這步後會生成一個LaunchImage(即第四步)

3、根據分辨率上傳圖片

對應的圖片尺寸：

iPhone X Portrait iOS 11+（1125×2436）
iPhone X Landscape iOS 11+（2436×1125）
......

也可以隨便上傳一張，查看需要的尺寸(直接將圖片拖進去即可)

 

選中LaunchScreen.xib,會有個彈出框，默認選擇確定就行，然後把右邊的 Use as Launch Screen 取消選中

 

4、置Launch Images Srouce配置爲LaunchImage，然後設置Launch Screen File爲空（這個很重要）

 

設置圖標

 

使用很簡單

export default class App extends Component {
    componentDidMount() {
        SplashScreen.hide(); // 關閉啓動屏幕
    }
    render() {
        return (
            <Root>
                <StackNavigator />
            </Root>
            
        )
    }
}

 

APP名稱修改：

1、Android

打開 res/values/strings.xml 修改

<resources>
     <!--<string name="app_name">亞米辦工</string>-->  //修改前
     <string name="app_name">示例</string>  //修改後
</resources>

2、iOS

打開項目根目錄，選擇 general 修改 display name