从React过来,发现React Native(以下简称RN)居然没有Button。隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的。没有Button,就没有点击效果啊。这还真是让人郁闷了。

什么叫Button。略去各种细节可以得出一个定义:可以处理用户点击,在用户按下的时候有按下的效果,松开之后立即回复到原来的效果上。

在React里,可以使用直接使用HTML的元素。比如,<button />或者<input type="button" value="button" />。但是,在RN里是没有类似标签直接作为Button使用的。

发现

于是乎找了找RN官网的文档,发现了一个可以处理点击的TouchableHighlight。具体可以看这里

既然可以处理点击就实现了Button很大的一个功能点了。动手实现一个:

import React from 'react';
import {
TouchableHighlight,
Text,
Alert
} from 'react-native'; export default class TouchableButton extends React.Component {
render() {
return (
<TouchableHighlight onPress={
()=> {
Alert.alert(
`你点击了按钮`,
'Hello World!',
[
{text: '以后再说', onPress: () => console.log('Ask me later pressed')},
{text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: '确定', onPress: () => console.log('OK Pressed')},
]
)
}
}>
<Text>Button</Text>
</TouchableHighlight>
);
}
}

效果就是这样的:

点击以后是这样的:

目前这个按钮只可以被称为是一个可以点击的Label。如果你保持按下的手势,不会有任何的变化。

填坑

我们的目标就是让按钮在按下的时候让用户知道他按钮处在按下的状态。

样式

但是,在这之前需要让用户知道这个按钮在哪里,范围是多大。这就需要样式出马了。React可以使用HTML的CSS样式,但是推荐使用的是自包含(self-contain)的样式。正好这个推荐的方式也是React-Native支持的。

const styles = StyleSheet.create({
button: {
padding: 10,
borderColor: 'blue',
borderWidth: 1,
borderRadius: 5
},
});

应用这个样式:

    <TouchableHighlight onPress={
()=> {
Alert.alert(
`你点击了按钮`,
'Hello World!',
[
{text: '以后再说', onPress: () => console.log('Ask me later pressed')},
{text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: '确定', onPress: () => console.log('OK Pressed')},
]
)
}
+ } style={styles.button}>
<Text>Button</Text>
</TouchableHighlight>

看起来就是这样了。

Style果然是很好用啊,来看看这些样式都实现了什么。

        padding: 10,
borderColor: 'blue',
borderWidth: 1,
borderRadius: 5

padding就不用说了。其他的就是画了边框,边框的宽为1px,颜色是蓝色,最后指定了圆角。

按下,hold住

如何区分什么时候是按下的,什么时候是按下松开的这就提上日程了。

处理这个问题需要请出React的State了。默认状态State是未按下(pressed为false),按下了改为pressed为true。就酱。

这需要用到TouchableHighlight的两个事件onShowUnderlay按下调用和onHideUnderlay,这个在按下松开后调用。 在这两个事件发生的时候修改state, 这样就会触发整个组件重绘。

    <TouchableHighlight onPress={
()=> {
// Alert.alert(
// `你点击了按钮`,
// 'Hello World!',
// [
// {text: '以后再说', onPress: () => console.log('Ask me later pressed')},
// {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: '确定', onPress: () => console.log('OK Pressed')},
// ]
// )
}
+ } style={[styles.button, this.state.pressed ? {backgroundColor: 'green'} : {}]}
+ onHideUnderlay={()=>{this.setState({pressed: false})}}
+ onShowUnderlay={()=>{this.setState({pressed: true})}}>
<Text>Button</Text>
</TouchableHighlight>

完毕

这样实现出来之后Android和iOS都可以用。多省事儿,而且这样的定制并不费事。

React Native填坑之旅--Button篇的更多相关文章

  1. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  2. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  3. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

  4. React Native填坑之旅--ListView篇

    列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...

  5. React Native填坑之旅--LayoutAnimation篇

    比较精细的动画可以用Animated来控制.但是,在一些简单的界面切换.更新的时候所做的动画里再去计算开始值.结束值和插值器如何运作绝对是浪费时间. RN正好给我们提供了LayoutAnimation ...

  6. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...

  7. React Native填坑之旅--组件生命周期

    这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...

  8. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  9. React Native填坑之旅--动画

    动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...

随机推荐

  1. springMVC下载FTP上的文件

    springMVC下载FTP上的文件 今天没时间写.先上传 一个工具类 工具类 package com.utils; import java.io.File; import java.io.FileO ...

  2. dedecms代码研究五

    上一次留几个疑问: 1)DedeTagParse类LoadTemplet方法. 2)MakeOneTag到底在搞什么. 从DedeTagParse开始前面,我们一直在dedecms的外围,被各种全局变 ...

  3. C# RSA 算法

    RSA公钥加密算法是1977年由Ron Rivest.Adi Shamirh和LenAdleman在(美国麻省理工学院)开发的.RSA取名来自开发他们三者的名字.RSA是目前最有影响力的公钥加密算法, ...

  4. 深入理解JS异步编程三(promise)

    jQuery 原本写一个小动画我们可能是这样的 $('.animateEle').animate({ opacity:'.5' }, 4000,function(){ $('.animateEle2' ...

  5. android 根据包名打开app程序

    如: 如打开微信: 查看包名的工具app:http://pan.baidu.com/s/1kVK2ER9 效果如下: 查看包名.版本和签名的工具app:http://pan.baidu.com/s/1 ...

  6. solr 5.5.1安装并配置中文分词IKAnalyzer

    http://www.360doc.com/content/16/0623/17/5131531_570184594.shtml ——————————————————————————————————— ...

  7. Flat UI

    Flat :平的; 单调的; 不景气的; 干脆的; 免费的WEB界面工具组件库

  8. Mysql错误信息汇总

    目录: 1. Every derived table must have its own alias 内容: 1. Every derived table must have its own alia ...

  9. CentOS 6.5 源码编译搭建LNMP(三台独立主机实现)

    搭建前准备: 1.三台独立主机 nginx:192.168.1.102 php-fpm:192.168.1.105 mysql:192.168.1.103 2.相关软件的源码包 nginx:nginx ...

  10. oracle 同时更新(update)多个字段多个值

    --创建表A,B: create table A (a1 varchar2(33),a2 varchar2(33),a3 varchar2(33)); create table B (b1 varch ...