Splash Screen to a React Native App_android教程

上一篇: Android 干货下一篇:Android常用图片加载库介绍及对比

Splash Screen to a React Native App

发布时间：2019-08-06 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Splash Screen to a React Native App，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

icomoon：用于生成不同的icon font/svg icon
image gorilla: 用于生成不同分辨率的splash screen image
IOS(xcode)
随着iOS开发发展至今,在UI制作上大概分为三个流派:
1.使用代码手写UI和布局
2.使用Xib文件来组织UI: xib是一个可视化文件,就像我们往纸上画画一样,我们可以随意拖动一个UI控件到这张纸上
3.使用StoryBoard故事板: 完整的 iOS app 是由多个供用户导航的视图组成的。这些视图之间的关系由 Storyboard 定义，Storyboard 显示 app 流的完整视图。Interface Builder 的 Storyboard 设计器可轻松创建和设计新视图，并将它们链接在一起，形成适用于自定代码的完整用户界面。
具体可参考该文章xib,storyboard对比
xcode制作splash screen：
react-native inIT splashScreenDemo
xcode oPEn splashScreenDemo.xcodePRoj:
方法一：

可以看到默认的IOS启动时默认的splash screen是用的LaunchScreen.xib中绘制的图片来作为该APP的启动页（运用LaunchScreen.xib可以自己绘制APP启动页）

方法二：
删除LaunchScreen.xib文件，“Launch Images Source” and click “Use Asset Cata@R_406_2869@…”, 删除Launch Screen Files中选择的LaunchScreen


image gorilla上生成的不同分辨率的图片文件夹 -> IOS -> Resources -> splash -> 所有图片导入到Images xcassets -> LaunchImage。
启动APP就可以看到splash screen。
AndROId(Android studio)
open splashScreenDemo/android
方法一：
image gorilla上生成的不同分辨率的图片文件夹 -> Android -> res -> drawable

drawable-hdpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi

导入到Android/app/res目录下
android/app/src/main/res create a drawable directory, then create a new Drawable resource file（splash）。
`

      
      
      -tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
    
" title="" data-original-title="复制">
      
      
<item>
    <bitmap
        android:gravity="fill"
        android:src="@drawable/screen(改名字跟drawable-*下面的图片name是一致的)"/>
</item>
`
add a new style to the android/app/res/values/styles.XMl

      
      
      
      
      
    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>
Android/app/java/com.splashscreendemo/ 新建SplashActivity.java

      
      
      
      
      
public class SplashActivity extends AppCompatActivity {
    @override
    protected void onCreate(Bundle savedInstancestate) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}
AndroidManifest.xML中添加new activity “.SplashActivity”

      
      
      
      
      
        <activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
启动Android APP就会看到splash screen了。
方法二：
npm install react-native-splashscreen --save
react-native-splash-screen制作screen
当图片需要合成时，则需要自己再去写样式
例如：android/app/res/layout/launch_screen.xml

      
      
      
      
      
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout >"http://schemas.android.COM/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/screen">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="95dp"
        android:layout_height="70dp"
        android:src="@drawable/copyright"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="10dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Powered By: "
        android:textSize="12dp"
        android:textColor="#C0C0C0"
        android:layout_toLeftOf="@id/logo"
        android:layout_alignBottom="@id/logo"
        android:layout_marginBottom="20dp"
        />
</RelativeLayout>