如何开始使用react-native-bootsplash

Question

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

Answer 1

这是我与 RN 集成的方式0.62.2：

\n

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

\n

yarn add react-native-bootsplash\n

\n

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

\n

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

\n

第 3 步：更新此文件 ->android/app/src/main/java/com/chill/MainActivity.java

\n

import com.zoontek.rnbootsplash.RNBootSplash; //<- add this import statement\n\npublic class MainActivity extends ReactActivity {\n\n  /**\n   * Returns the name of the main component registered from JavaScript. This is used to schedule\n   * rendering of the component.\n   */\n  @Override\n  protected String getMainComponentName() {\n    return ....\n  }\n\n  // Add this for splash screen\n  @Override\n  protected void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n    RNBootSplash.init(R.drawable.bootsplash, MainActivity.this); // <- display the generated bootsplash.xml drawable over our MainActivity\n  }\n}\n\n

\n

第四步：修改android/app/src/main/res/values/styles.xml

\n

<resources>\n\n    <!-- Base application theme. -->\n    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">\n        <!-- Customize your theme here. -->\n        <item name="android:textColor">#000000</item>\n    </style>\n\n    <!-- Add the following lines -->\n    <!-- BootTheme should inherit from AppTheme -->\n    <style name="BootTheme" parent="AppTheme">\n        <!-- set the generated bootsplash.xml drawable as activity background -->\n        <item name="android:background">@drawable/bootsplash</item>\n    </style>\n\n</resources>\n

\n

确保您应该拥有此文件 - android/app/src/main/res/drawable/bootsplash.xml，这是从步骤 2 生成的。

\n

第5步：修改android/app/src/main/AndroidManifest.xml

\n

...\n<application\n            android:name=".MainApplication"\n            android:label="@string/app_name"\n            android:icon="@mipmap/ic_launcher"\n            android:roundIcon="@mipmap/ic_launcher_round"\n            android:allowBackup="false"\n            android:theme="@style/AppTheme">\n        <activity\n                android:name=".MainActivity"\n                android:label="@string/app_name"\n                android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"\n                android:launchMode="singleTask"\n                android:windowSoftInputMode="adjustPan"\n                android:exported="true">\n            <!--        android:windowSoftInputMode="adjustResize">-->\n        </activity>\n        <!-- add the following lines (use the theme you created at step 3) -->\n        <activity\n                android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"\n                android:theme="@style/BootTheme"\n                android:launchMode="singleTask">\n\n            <intent-filter>\n                <action android:name="android.intent.action.MAIN" />\n                <category android:name="android.intent.category.LAUNCHER" />\n            </intent-filter>\n            <intent-filter>\n                <action android:name="android.intent.action.VIEW" />\n                <category android:name="android.intent.category.DEFAULT" />\n                <category android:name="android.intent.category.BROWSABLE" />\n                <data android:scheme="chill" />\n            </intent-filter>\n            <intent-filter>\n                <action android:name="android.intent.action.VIEW" />\n                <category android:name="android.intent.category.DEFAULT" />\n                <category android:name="android.intent.category.BROWSABLE" />\n                <data\n                        android:host="chill.com"\n                        android:scheme="https" />\n            </intent-filter>\n            <intent-filter>\n                <action android:name="android.intent.action.VIEW" />\n                <category android:name="android.intent.category.DEFAULT" />\n                <category android:name="android.intent.category.BROWSABLE" />\n                <data\n                        android:host="chill.com"\n                        android:scheme="http" />\n            </intent-filter>\n\n        </activity>\n\n        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />\n\n    </application>\n...\n

\n

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

\n

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

\n

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

\n

希望这可以帮助。

\n