文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

谷歌 Fuchsia 上手体验,将取代Android/win10

在手机市场领域,Google表现很抢眼,毫无疑问,Android 至今在移动操作系统的市场份额占据绝对领先地位,但是 Android 仍然存在不少问题,碎片化问题严重,在平板以及大屏幕设备上表现糟糕,...

linux-tao
16分钟前
1
0
List、Array与ArrayList

数组在内存中是连续存储的,所以它的索引速度很快,而且赋值和修改元素也非常快,比如: string[] s=new string[3];//赋值 s[0]="a"; s[1]="b"; s[2]="c";//修改 s[1]="b1"; 但是数组...

shimmerkaiye
19分钟前
0
0
Linux 的Lnmp环境下为mysql添加环境变量

一.问题 在Linux 安装完Lnmp 环境后 , 连接Mysql 告诉没有这条命令 mysql -uroot -p 命令失效 因为是源码安装的,所以会出现这样的的原因 。集成环境是不会出现的。 其实很简单,只需要给m...

15834278076
21分钟前
3
0
apolloxlua include函数

include函数不是单独使用的函数, 他并不是标准库的一部分, 你可以使用include函数将某个后缀为 .aop的文档包含到你的文档流中。 因为include是单独处理流, 所以不会在主处理流程中有所表示...

钟元OSS
25分钟前
0
0
【转载分享】做一名较真的工程师

近些年与我共事过的同事,一定知道我至今仍有一个较真的性格。我会:指出同事所写代码的不当命名问题(并帮助改进);指出同事所写文档中的逻辑混乱问题(并辅以修订);指出同事所写PPT中乱...

HellerZhang
26分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部