文档章节

react native ES6学习 image组件

zcl111
 zcl111
发布于 2016/05/20 15:06
字数 192
阅读 12
收藏 0
点赞 2
评论 0

import React, { Component } from 'react'; import { StyleSheet, Text, AppRegistry, View, Image, TouchableOpacity } from 'react-native';

var imgs = [ 'http://vczero.github.io/ctrip/hua2.png', 'http://vczero.github.io/ctrip/nian2.png', 'http://vczero.github.io/me/img/xiaoxue.png' ]; class MyImage extends Component {

constructor(props) {
    super(props);
    this.state = {
        imgs: imgs,
        count: 0
    }
}

goNext(){
    let count = this.state.count;
    count ++;
    if(count < imgs.length){
        this.setState({
            count: count
        });
    }
}
goPreview(){
    let count = this.state.count;
    count --;
    if(count >= 0){
        this.setState({
            count: count
        });
    }
}
render(){
    return(
        <View style={[styles.flex]}>
            <View style={styles.image}>
                <Image style={styles.img}
                       source={{uri: this.state.imgs[this.state.count]}}
                       resizeMode="contain"
                />
            </View>
            <View style={styles.btns}>
                <TouchableOpacity onPress={this.goPreview.bind(this)}>
                    <View style={styles.btn}>
                        <Text>上一张</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.goNext.bind(this)}>
                    <View style={styles.btn}>
                        <Text>下一张</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    );
}

}

class HelloWorld extends Component { render(){ return( <View style={[styles.flex, {marginTop:40}]}> <MyImage imgs={imgs}></MyImage> </View> ); } };

var styles = StyleSheet.create({ flex:{ flex: 1, alignItems:'center' }, image:{ borderWidth:1, width:300, height:200, borderRadius:5, borderColor:'#ccc' }, img:{ height:200, width:300, }, btns:{ flexDirection: 'row', justifyContent: 'center', marginTop:20 }, btn:{ width:60, height:30, borderColor: '#0089FF', borderWidth: 1, justifyContent: 'center', alignItems:'center', borderRadius:3, marginRight:20, }, });

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

© 著作权归作者所有

共有 人打赏支持
zcl111
粉丝 3
博文 92
码字总数 11552
作品 0
六安
程序员
React-Native学习资源

React-Native学习资源 目录教程 React Native React.js ES6 系列教程 kai源APP 组件 工具 资源网站 业界讨论 教程 React Native React-Native专题系列文章不断更新ing(入门,组件,Api,kai源项...

问题达人 ⋅ 2016/03/29 ⋅ 0

react native的一些基本概念

理解react native 一般做纯客户端Native开发的人,如果只是听说过react native,没有仔细了解的话,会本能的认为 react native是一个东西,是某种语言或某个开发模式。那咱们先从感性上认识r...

totogo2010 ⋅ 2016/06/12 ⋅ 0

React-Native学习资源

React-Native学习资源 官网文档:https://facebook.github.io/react-native/docs/getting-started.html#content 中文文档:http://reactnative.cn/ 目录 教程 React Native React.js ES6 系列教......

啊莫 ⋅ 2016/03/27 ⋅ 0

React-Native学习资料分享

React Native 构建 Facebook F8 2016 App / React Native 开发指南 f8-app.liaohuqiu.net/ React-Native入门指南 github.com/vczero/reac… 30天学习React Native教程 github.com/fangwei71......

codeGoogle ⋅ 05/27 ⋅ 0

iOS开发者React Native学习路线

http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/ 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解...

卡奇匠 ⋅ 2016/12/13 ⋅ 0

React/React Native 的ES5 ES6写法对照表

很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做...

freecsdn ⋅ 2016/09/14 ⋅ 0

React Native第3天——常用组件和常见Q&A

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn ⋅ 2016/03/30 ⋅ 0

React-Native学习资料

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn ⋅ 2016/04/06 ⋅ 0

ReactNative快速入门笔记

ReactNative的文档地址有多个,如果你英文够好,就去研读官方的文档吧, 如果读原文比较吃力,中文官网也是不错的选择。 下面是我个人记录的一些笔记,仅供初学者入门参考 预科 入门React N...

木羽zwwill ⋅ 2017/09/19 ⋅ 0

React Native移动开发资料库

原文链接:https://github.com/LeoMobileDeveloper/ReactNativeMaterials 本文整理了React Native开发中额优秀博客,以及优秀的Github库列表(很多英文资料源自于awesome-react-native) 关于...

code_xzh ⋅ 2017/12/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 4分钟前 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 20分钟前 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 28分钟前 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 33分钟前 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 51分钟前 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 59分钟前 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 59分钟前 ⋅ 0

聊聊spring cloud gateway的RedisRateLimiter

序 本文主要研究下spring cloud gateway的RedisRateLimiter GatewayRedisAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/gateway/con......

go4it ⋅ 今天 ⋅ 0

169. Majority Element - LeetCode

Question 169. Majority Element Solution 思路:构造一个map存储每个数字出现的次数,然后遍历map返回出现次数大于数组一半的数字. 还有一种思路是:对这个数组排序,次数超过n/2的元素必然在中...

yysue ⋅ 今天 ⋅ 0

NFS

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC...

派派菠菜 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部