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

標籤：

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

Android：

iOS：

 

一、iOS歡迎介面的實現：

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

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

二、Android歡迎介面的實現

首先，我們建立一個WelcomeScreen.js檔案

輸入代碼：

 1 ‘use strict‘ 2  3 import React from ‘react-native‘ 4  5 var { 6   Image, 7   StyleSheet, 8   View, 9   Animated,10   PropTypes11 } = React12 13 class WelcomePage extends React.Component {14    return (15       <View style={styles.container}>16         <Animated.Image17         onLoadEnd={() => {18           Animated.timing(this._animatedValue, {19             toValue: 100,20             duration: 100021           }).start()22         }}23         source={{uri: ‘http://192.168.6.5:8888/getImage?imgName=welcome.jpg‘}} style={[styles.img, {opacity: interpolatedColorAnimation}]}/>24       </View>25     )26   }27 }28 var styles = StyleSheet.create({29   container: {30     flex: 1,31     justifyContent: ‘center‘,32     alignItems: ‘center‘,33     backgroundColor: ‘#ffffff‘34   },35   img: {36     flex: 1,37     width: 400,38     height: 200,39     resizeMode: ‘contain‘40   }41 })42 43 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”，在真機或者模擬器上都可以看到效果

1 ‘use strict‘2 3 var React = require(‘react-native‘)4 5 var WelcomeScreen = require(‘./src/screens/WelcomeScreen‘)6 React.AppRegistry.registerComponent(‘GuoKuApp‘, () => WelcomeScreen)

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