使用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 PropTypes 11 } = React 12 13 class WelcomePage extends React.Component { 14 return ( 15 <View style={styles.container}> 16 <Animated.Image 17 onLoadEnd={() => { 18 Animated.timing(this._animatedValue, { 19 toValue: 100, 20 duration: 1000 21 }).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)
转载于:https://www.cnblogs.com/weifengzz/p/5173125.html
使用react-native做一个简单的应用-03欢迎界面相关推荐
- 【tkinter】的使用详解,做一个简单实用的万能可视化界面!
文章目录 一.tkinter类介绍 二.在例子中学会用法! 1.一个简单的开始 2.学会使用button 3.Entry窗口部件 1.简单使用 2.动态改变entry内部的值 4.Text窗口部件 ( ...
- React Native实现一个带筛选功能的搜房列表(2)
原文链接React Native实现一个带筛选功能的搜房列表(2) 在上一篇中,我们实现了一个下拉刷新和上拉加载更多的列表,那根据一般的开发步骤,接着应该就是进行网络请求,在网络请求之后更新列表数据和 ...
- 函数式编程中的战斗机(二) --运用elm语言MUV设计模式做一个简单的应用实例
@函数式编程中的战斗机(二) -运用elm语言MUV设计模式做一个简单的应用实例 1 elm语言设计模式的特点 1.1 面向对象设计模式的特点 每种编程语言都有其独特的语法和优缺点,从而导致与众不同的 ...
- pygame做一个简单的打字游戏
pygame做一个简单的打字游戏 1.基本代码 下面的代码完成了每一秒在界面的顶部随机生成一个新的字母 # -*- coding=utf-8 -*- import pygame from pygame ...
- 第四章 .net core做一个简单的登录
项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...
- clistctrl控件最后插入在后面_用图表控件做一个简单的员工信息查询系统
前几天在上课的时候有同学说在做人员的信息查询的时候,经常的要去做查找搜索很麻烦,能不能做一个简单的人员信息查询系统,只需要选择人员的编号就可以查询到这个员工的信息.其实要实现这个同学的需求在EXCEL ...
- 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截...
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少.数据 ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- 【Python】如何用python做一个简单的输入输出交互界面?
看到知乎上有人在问,如何使用Python做一个简单的输入输出交互界面? 交互界面就涉及到GUI编程. Python有很多GUI框架,功能大同小异. 其中比较出名的有「PyQT」.**wxPython. ...
- 如何复制java卡,使用java做一个简单的集卡程序
使用java做一个简单的集卡程序 本次设想的是要集齐4张卡,每张卡的概率都是25%,如果每个用户集齐需要多少次才能集合完毕 public class Test { public static void ...
最新文章
- SuperGLUE和GLUE双料冠军!图灵T-NLRv5:MNLI和RTE首次达到人类水平
- scrapy基础知识之 parse()方法的工作机制思考:
- elementui的el-tree第一次加载无法展开和选中的问题
- 第一章--最小的“操作系统”
- @autowired注入mapper_Intellij IDEA中Mybatis Mapper自动注入警告的6种解决方案
- 一种mac使用机械键盘的解决方案
- 别魔改网络了,Google研究员:模型精度不高,是因为你的Resize方法不够好
- 则执行C语言语句unsigned,部分C语言题目
- python如何遍历文件夹中的所有图片_python实现遍历文件夹图片并重命名
- NGINX轻松管理10万长连接
- Shiro过滤器配置(ShiroFilterFactoryBean)
- mysql 数据操作 多表查询 子查询 带比较运算符的子查询
- 递归函数之阶乘的实现
- javascript的prototype继承问题
- Java生成真正格式的Excel文件
- GridView中的格式化
- 终于,J 神还是加入了 Google!
- 如何解决第三方JavaScript引入工程后报错
- Android 抓包工具
- QQ VS MSN——QQ “只爱陌生人”,MSN “不和陌生人说话”
热门文章
- Python3基础 try-指定except-as reason 捕获打开一个不存在的文件的时候,会产生OSError异常的示例
- Oracle sql 错误 : ORA-01861: 文字与格式字符串不匹配和日期与字符串互转问题解决
- ORACLE异常处理及函数
- 如果/否则列表理解?
- Win11任务栏不重叠怎么设置,Win11任务栏不重叠设置方法
- 计算当前时间往加N天后的时间,Date,SimpleDateFormat,Calendar
- 对象tostring后怎么转成对象_和女生相亲后怎么联系对方?和相亲对象该如何聊天...
- linux上mysql定时备份数据库数据_Linux下如何实现MySQL数据库每天定时自动备份
- ❤️《网络编程从入门到入魔》(建议收藏)❤️
- 使用Mybatis如何对Mysql进行分页功能?