使用react-native做一个简单的应用-03欢迎界面
2016-01-31 12:51
1006 查看
Android和iOS的欢迎界面是不一样的,在iOS中有一个默认的欢迎界面,而Android则需要自己写。因此我就分开说一下这两个平台的欢迎界面的搭建。下面先看一下实现效果:
Android:
iOS:
一、iOS欢迎界面的实现:
它的实现跟React-Native是没有半毛钱的关系的。你需要在Xcode中去实现这个界面。也就是去设计LaunchScreen.xib,如图所示:
由于不是iOS的开发人员,对iOS也不是很懂,所以我就拖拖拽拽,最后将图片设置为居中就行啦。
二、Android欢迎界面的实现
首先,我们创建一个WelcomeScreen.js文件
输入代码:
这样一个带有淡入效果的Android欢迎界面就搭建完成了。其中使用了Animated动画,如果不了解的可以查看官方文档,这里我向大家推荐一个不错的介绍react native动画的网址:http://browniefed.com/react-native-animation-book/index.html
最后看看运行效果
iOS的就直接在xCode中运行就可以啦
Android的需要在index.android.js文件中引入这个界面,输入命令:“$react-native run-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)
相关文章推荐
- React-Native 学习之 Flex布局
- React Native -ios环境搭建
- 【React Native开发】React Native控件之ToolbarAndroid工具栏控件讲解以及使用(15)
- iOS-Reactive Cocoa的常见用法
- ReactiveCocoa v2.5 源码解析 之 架构总览
- react-native:require含义
- react-native:unexpected token
- react-native之js事件发送并得到返回结果
- react-native之native主动向js发送事件
- react-native之module的使用
- React Native 中文版
- ReactJs基础_1
- 【React Native开发】React Native控件之ScrollView组件讲解(14)
- 使用react-native做一个简单的应用-02项目搭建与运行
- 使用react-native做一个简单的应用-01项目介绍
- React Native-6.React Native Text组件,多组件封装实战之凤凰资讯页面
- React Native通信机制详解
- React Native工程离线运行(ios)
- React Native 初探
- ubuntu 12.04 react-native 安装