Splash Screen to a React Native App

前端之家收集整理的这篇文章主要介绍了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 Catalog…”,删除Launch Screen Files中选择的LaunchScreen

image gorilla上生成的不同分辨率的图片文件夹 -> IOS -> Resources -> splash -> 所有图片导入到Images xcassets -> LaunchImage。
启动APP就可以看到splash screen。

Android(Android studio)

open splashScreenDemo/android

方法一:
  1. image gorilla上生成的不同分辨率的图片文件夹 -> Android -> res -> drawable
  • drawable-hdpi
  • drawable-mdpi
  • drawable-xhdpi
  • drawable-xxhdpi

导入到Android/app/res目录下

  1. android/app/src/main/res create a drawable directory,then create a new Drawable resource file(splash)

`

<item>
    <bitmap
        android:gravity="fill"
        android:src="@drawable/screen(改名字跟drawable-*下面的图片name是一致的)"/>
</item>

`

  1. 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>
  1. 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();
    }
}
  1. 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 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/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>
原文链接:https://www.f2er.com/react/302212.html

猜你在找的React相关文章