文档章节

react native ES6学习 image组件

zcl111
 zcl111
发布于 2016/05/20 15:06
字数 192
阅读 14
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

Deepin 安装wireshark抓包工具

一、关于deepin和wireshark deepin目前已经发展到15.8了,开发Android毫无压力,在四个月的使用时间里,已经非常习惯了。目前想处理一些网络问题,因此尝试在deepin上安装一个抓包工具。dee...

IamOkay
17分钟前
0
0
Docker镜像仓库服务-Nexus

建立云原生集群系统,建立自己的私有Docker镜像仓库必不可少。一方面可以加快多节点部署容器镜像的下载速度,另一方面是为了安全(容器里存储有系统所有的信息、包括密码、数据库等等,切记不...

openthings
29分钟前
1
0
127.0.0.1 和 0.0.0.0 地址的区别

1. IP地址分类 1.1 IP地址表示 IP地址由两个部分组成,net-id和host-id,即网络号和主机号。 net-id:表示ip地址所在的网络号。 host-id:表示ip地址所在网络中的某个主机号码。 即: IP-a...

华山猛男
今天
19
0
解决Unknown host 'd29vzk4ow07wi7.cloudfront.net'. You may need to adjust the proxy settings in Gradle.

把 总项目 下的 build.gradle 中的 两个 jcenter() 用 maven{ url ‘http://maven.aliyun.com/nexus/content/groups/public/’} 代替。...

lanyu96
今天
6
0
基于redis的分布式锁

redisson提供了基于redis的分布式锁实现方式,本文就尝试了下锁的使用方式。Redisson同时还为分布式锁提供了异步执行的相关方法,第二节执行介绍。 一、可重入锁验证 同一个jvm里面同一线程的...

noob_chr
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部