如何开始使用react-native-bootsplash

Question

我想使用react-native-bootsplash制作启动画面。我已按照 npm 上的说明进行操作，并且该库已正确安装，但我无法理解如何使用它。有人可以给我一个示例或一个小代码片段，我可以在 App.js 中编写并开始使用。一个基本的例子就可以了。

Answer 1

这是我与 RN 集成的方式

0.62.2

：

第1步：将包添加到react-native项目

yarn add react-native-bootsplash

第 2 步： 生成启动屏幕的资源。

yarn generate-bootsplash
...
yarn run v1.19.0
$ /Users/sresu/personal/startups/chill/code/chill-app-rn/node_modules/.bin/generate-bootsplash
✔ The path to the root of your React Native project … .
✔ The path to your static assets directory … assets
✔ Your original icon file … assets/bootsplash_logo_original.png
✔ The bootsplash background color (in hexadecimal) … #FFF
✔ The desired icon width (in dp - we recommend approximately ~100) … 100
✔ Are you sure? All the existing bootsplash images will be overwritten! … yes
👍  Looking good! Generating files…
✨  android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png (100x100)
✨  android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png (150x150)
✨  android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png (300x300)
✨  ios/chill/Images.xcassets/BootSplashLogo.imageset/[email protected] (200x200)
✨  ios/chill/Images.xcassets/BootSplashLogo.imageset/[email protected] (300x300)
✨  assets/bootsplash_logo.png (100x100)
✨  assets/bootsplash_logo@1,5x.png (150x150)
✨  assets/[email protected] (200x200)
✨  assets/[email protected] (300x300)
✨  assets/[email protected] (400x400)
✨  android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png (400x400)
✨  ios/chill/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png (100x100)
✨  android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png (200x200)
✨  ios/chill/BootSplash.storyboard
✨  android/app/src/main/res/drawable/bootsplash.xml
✨  android/app/src/main/res/values/colors.xml
✅  Done! Thanks for using react-native-bootsplash.
✨  Done in 10.86s.

第 3 步： 更新此文件 ->

android/app/src/main/java/com/chill/MainActivity.java

import com.zoontek.rnbootsplash.RNBootSplash; //<- add this import statement

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return ....
  }

  // Add this for splash screen
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    RNBootSplash.init(R.drawable.bootsplash, MainActivity.this); // <- display the generated bootsplash.xml drawable over our MainActivity
  }
}

第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:textColor">#000000</item>
    </style>

    <!-- Add the following lines -->
    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="AppTheme">
        <!-- set the generated bootsplash.xml drawable as activity background -->
        <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>

确保您应该拥有此文件 -

android/app/src/main/res/drawable/bootsplash.xml

，这是从步骤 2 生成的。

第5步：修改

android/app/src/main/AndroidManifest.xml

...
<application
            android:name=".MainApplication"
            android:label="@string/app_name"
            android:icon="@mipmap/ic_launcher"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:allowBackup="false"
            android:theme="@style/AppTheme">
        <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
                android:launchMode="singleTask"
                android:windowSoftInputMode="adjustPan"
                android:exported="true">
            <!--        android:windowSoftInputMode="adjustResize">-->
        </activity>
        <!-- add the following lines (use the theme you created at step 3) -->
        <activity
                android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
                android:theme="@style/BootTheme"
                android:launchMode="singleTask">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="chill" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                        android:host="chill.com"
                        android:scheme="https" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                        android:host="chill.com"
                        android:scheme="http" />
            </intent-filter>

        </activity>

        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

    </application>
...

最后一步：应用程序准备就绪时隐藏启动屏幕

class App extends React.Component<Props, State> {
    componentDidMount() {
        RNBootSplash.hide({duration: 250}); // fade
...

官方文档：https://github.com/zoontek/react-native-bootsplash

🤗希望这有帮助。

Answer 2

npx反应本机生成bootsplash ./assets/bootsplash_logo_original.png --background --logo-width=200 --assets-output=./assets

错误选项“--license-key”丢失。