React Native中Touchable组件的使用
截图如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
AlertIOS,
} from 'react-native'; // ES5写法
var ViewDemo = React.createClass({ getInitialState(){ return{
title: '不透明触摸'
}
},
render() {
return ( <View style={styles.container} onPress = {this.rendPress()}> <TouchableOpacity activeOpacity = {0.2}
onPress = {()=>this.activeEvent('点击了啦!!!')}
onPressin = {()=>this.activeEvent('按下了啦!!!')}
onPressout = {()=>this.activeEvent('抬起了啦!!!')}
onLongPress = {()=>this.activeEvent('长按了啦!!!')}
>
<View style = {styles.innerStyle}>
<Text>点击事件</Text>
</View>
</TouchableOpacity>
<View>
<Text>{this.state.title}</Text>
</View>
</View>
);
}, // ,号在ES5必须写,ES6可以不写 // 当按下鼠标
rendPress(){
AlertIOS.alert('点击了')
},
activeEvent(event){
this.setState({
title: event
})
}
}); // ES6写法 /*
class ViewDemo extends Component { render() {
return ( <View style={styles.container} onPress = {this.rendPress()}> <TouchableOpacity activeOpacity = {0.2}>
<View style = {styles.innerStyle}>
<Text>我是文本,但是可以点击!!!</Text>
</View>
</TouchableOpacity>
</View>
);
} // 当按下鼠标
rendPress(){
AlertIOS.alert('点击了')
}
}
*/ const styles = StyleSheet.create({
container: { backgroundColor: 'green', // 设置背景颜色
width: , // 宽度
height: // 高度 最后一个样式的,可以不写,其余的必须写,不然报错
},
innerStyle: {
backgroundColor: 'red',
width: ,
height: ,
marginTop: ,
},
innerStyle1: {
backgroundColor: 'yellow',
width:
},
}); AppRegistry.registerComponent('ViewDemo', () => ViewDemo);
代码如下:
React Native中Touchable组件的使用的更多相关文章
- React Native 中吐司组件react-native-easy-toast
https://github.com/crazycodeboy/react-native-easy-toast 用法: import Toast from 'react-native-easy-toa ...
- React Native中加载指示器组件ActivityIndicator使用方法
这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- React Native 之 Touchable 介绍与使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- react native 触摸Touchable***的区别(TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback)
一.问题背景: react native的跨平台开发没有button的概念,而是使用touchable系列实现点击触发效果. 而touchable系列就有四个之多,而且相互之间仍有较大差别,这就给我们 ...
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React Native之Image组件
同 HTML 的 img 元素一样,React Native 提供的 Image 组件可以用来显示各种途径的图片,比如网络图片.本地图片.照相机图片等. 虽然效果是一样的.然而用法还是有区别的. 1. ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
随机推荐
- celery的简单使用
一 安装celery #首先进行一些简单配置 pip install celery apt-get install erlang apt-get install rabbitmq-server 二 ...
- docker修改数据库密码
运行mysql(--name 容器名称 -e MYSQL_ROOT_PASSWORD设置初始密码 -p 3307:3306 端口映射,主机端口3307) docker run --name my ...
- Java生成压缩文件(zip、rar 格式)
jar坐标: <dependency> <groupId>org.apache.ant</groupId> <artifactId>ant</ar ...
- Hivesql中的正则
================================================================================================= 一般 ...
- 压测工具ab的简单使用
apache benchmark(ab)是一种常见的压测工具,不仅可以对apache进行压测,也可以对nginx,tomcat,IIS等进行压测 安装 如果安装了apache,那么ab已经自带了,不需 ...
- BZOJ 3210: 花神的浇花集会 (切比雪夫距离)
GXZlegend 切比雪夫和曼哈顿距离的互相转化看这里 传送门 CODE #include <bits/stdc++.h> using namespace std; #define LL ...
- 12 saltstack部署OpenStack
参考源码:https://github.com/unixhot/salt-openstack nova control.sls
- Educational Codeforces Round 13 D. Iterated Linear Function 逆元+公式+费马小定理
D. Iterated Linear Function time limit per test 1 second memory limit per test 256 megabytes input s ...
- 使用shell脚本完成自动化部署及秒级回滚
一.部署机代码目录结构 使用www用户进行代码部署,所有部署机上需要创建www用户,并赋予根目录权限,同时配置公私钥认证建立信任关系. [www@ansible-node1 deploy]$ tree ...
- $\LaTeX$数学公式大全
$\LaTeX$数学公式大全$1\ Geek\ and\ Hebrew\ letters$ $\LaTeX$数学公式大全$2\ Math\ Constructs$ $\LaTeX$数学公式大全$3\ ...