使用react-native做一個簡單的應用－03歡迎界面

Android和iOS的歡迎界面是不一樣的，在iOS中有一個默認的歡迎界面，而Android則需要自己寫。因此我就分開說一下這兩個平台的歡迎界面的搭建。下面先看一下實現效果：

Android：

iOS：

 

一、iOS歡迎界面的實現：

它的實現跟React－Native是沒有半毛錢的關系的。你需要在Xcode中去實現這個界面。也就是去設計LaunchScreen.xib，如圖所示：

由於不是iOS的開發人員，對iOS也不是很懂，所以我就拖拖拽拽，最后將圖片設置為居中就行啦。

二、Android歡迎界面的實現

首先，我們創建一個WelcomeScreen.js文件

輸入代碼：

'use strict'

import React from 'react-native'

var {
  Image,
  StyleSheet,
  View,
  Animated,
  PropTypes
} = React

class WelcomePage extends React.Component {
   return (
      <View style={styles.container}>
        <Animated.Image
        onLoadEnd={() => {
          Animated.timing(this._animatedValue, {
            toValue: 100,
            duration: 1000
          }).start()
        }}
        source={{uri: 'http://192.168.6.5:8888/getImage?imgName=welcome.jpg'}} style={[styles.img, {opacity: interpolatedColorAnimation}]}/>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  img: {
    flex: 1,
    width: 400,
    height: 200,
    resizeMode: 'contain'
  }
})

module.exports = WelcomePage

這樣一個帶有淡入效果的Android歡迎界面就搭建完成了。其中使用了Animated動畫，如果不了解的可以查看官方文檔，這里我向大家推薦一個不錯的介紹react native動畫的網址：http://browniefed.com/react-native-animation-book/index.html

最后看看運行效果

iOS的就直接在xCode中運行就可以啦

Android的需要在index.android.js文件中引入這個界面，輸入命令：“$react-native run-android”，在真機或者模擬器上都可以看到效果

'use strict'

var React = require('react-native')

var WelcomeScreen = require('./src/screens/WelcomeScreen')
React.AppRegistry.registerComponent('GuoKuApp', () => WelcomeScreen)