IOS(xcode)

随着iOS开发发展至今,在UI制作上大概分为三个流派:

1.使用代码手写UI和布局

2.使用Xib文件来组织UI: xib是一个可视化文件,就像我们往纸上画画一样,我们可以随意拖动一个UI控件到这张纸上3.使用StoryBoard故事板: 完整的 iOS app 是由多个供用户导航的视图组成的。这些视图之间的关系由 Storyboard 定义，Storyboard 显示 app 流的完整视图。Interface Builder 的 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）。

`

`

1. add a new style to the android/app/res/values/styles.xml

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”

启动Android APP就会看到splash screen了。

方法二：

npm install react-native-splashscreen --save

当图片需要合成时，则需要自己再去写样式

例如：android/app/res/layout/launch_screen.xml