文档章节

react native ES6学习 image组件

zcl111
 zcl111
发布于 2016/05/20 15:06
字数 192
阅读 12
收藏 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
73
0
react native的一些基本概念

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

totogo2010
2016/06/12
0
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
288
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
0
iOS开发者React Native学习路线

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

卡奇匠
2016/12/13
18
0

没有更多内容

加载失败,请刷新页面

加载更多

申请Let's Encrypt永久免费SSL证书

环境安装 1、安装git yum install git-core 2、安装python 系统自带 不用安装 只要版本大于2.7即可。 获取Let's Encrypt免费SSL证书 先停止nginx 在阿里云安全组里加入 443端口的入规则 git ...

HGMrWang
30分钟前
1
0
如何使用playframework进行更好的开发

1: 自定义基类Controller 相信刚开始使用Play的人写的Controller 都继承于 play.mvc.Controller , 但这并不是一个很好的选择,自建基类Controller可以扩展更多的功能。 1.1 验证功能。 后台...

tuerqidi
35分钟前
4
0
解决ubuntu下root用户 不能ftp登陆的问题

解决ubuntu下root用户 不能ftp登陆的问题 一般情况下,由于种种原因ftp是不让root用户远程登陆,但只要你修改以个文件就可以登陆了. 注释掉 /etc/ftpusers 中的root即可 (最后重启vsftpd serv...

15834278076
47分钟前
0
0
《JavaScript高级程序设计(第3版)》阅读笔记

第6章 面向对象的程序设计 6.2 创建对象 6.2.1 工厂模式 JavaScript创建对象(一)—— 工厂模式 6.2.2 构造函数模式 JavaScript创建对象(二)——构造函数模式 6.2.3 原型模式 JavaScript...

Bob2100
52分钟前
1
0
Windows小技巧 – Win+R提高Windows使用效率

追求效率的朋友都需要一款顺手的快速启动工具,Win 平台上有键盘流的RunZ、Listary、ALTRun、Launchy、Wox 和图标流的 Fences、Rolan、 WinLaunch 等,而 Mac 上也有 Alfred、Spotlight。 而...

QQZZFT
54分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部