Use React-native to make a simple application-03 Welcome interface

The welcome interface for Android and iOS is not the same, there is a default Welcome screen in iOS, and Android needs to write it yourself. So I'm going to say a few words about the welcome interface of these two platforms. Let's take a look at the implementation effect:

Android:

Ios:

First, the implementation of the iOS Welcome interface:

Its realization and react-native is not a half-penny relationship. You need to implement this interface in Xcode. That is, to design launchscreen.xib:

Because not the iOS developer, also not very understanding of iOS, so I drag and drop, and finally set the image to center on the line.

Second, the Android Welcome interface implementation

First, we create a welcomescreen.js file

Enter the code:

1' Use strict '2 3Import React from ' react-native '4 5 var {6 Image,7 StyleSheet,8 View,9 Animated,Ten Proptypes One} =React A  - class Welcomepage extends React.component { -    return ( the<view style={styles.container}> -<Animated.image -onloadend={() = { -Animated.timing ( This. _animatedvalue, { +tovalue:100, -duration:1000 + }). Start () A         }} atSource={{uri: ' Http://192.168.6.5:8888/getImage?imgName=welcome.jpg '}} style={[styles.img, {opacity: Interpolatedcoloranimation}]}/> -</View> -     ) -   } - } - varStyles =stylesheet.create ({ in container: { -Flex:1, toJustifycontent: ' Center ', +Alignitems: ' Center ', -BackgroundColor: ' #ffffff ' the   }, * img: { $Flex:1,Panax Notoginsengwidth:400, -height:200, theResizeMode: ' contain ' +   } A }) the  +Module.exports = Welcomepage

The Android Welcome screen with a fade-in effect is built. which uses the animated animation, if you do not understand the official documents can be viewed, here I recommend a good introduction react native animation URL: http://browniefed.com/ React-native-animation-book/index.html

Finally look at the running effect

iOS is just going to run right in Xcode.

Android needs to introduce this interface in the Index.android.js file, enter the command: "$react-native run-android", you can see the effect on the real machine or simulator

1 ' use strict '23var React = require (' react-native ')45  var welcomescreen = require ('./src/screens/welcomescreen ')6 React.AppRegistry.registerComponent (' Guokuapp ', () = Welcomescreen)

Use React-native to make a simple application-03 Welcome interface