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
- 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）。
`
@H_
404_76@<item>
<bitmap
android:gravity="fill"
android:src="@drawable/screen(改名字跟drawable-*下面的
图片name是一致的)"/>
</item>
`
- add a new style to the android/app/res/values/styles.xml
@H_
404_76@<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash</item>
</style>
- Android/app/java/com.splashscreendemo/ 新建SplashActivity.java
@H_
404_76@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”
@H_
404_76@<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
@H_
404_76@<?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
