React Native填坑之旅--Button篇
2016-09-25 15:12
330 查看
React Native填坑之旅–Button篇
React Native填坑之旅–动画
React Native填坑之旅–HTTP请求篇
从React过来,发现React Native(以下简称RN)居然没有Button。隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的。没有Button,就没有点击效果啊。这还真是让人郁闷了。
在React里,可以使用直接使用HTML的元素。比如,
既然可以处理点击就实现了Button很大的一个功能点了。动手实现一个:
效果就是这样的:
点击以后是这样的:
目前这个按钮只可以被称为是一个可以点击的Label。如果你保持按下的手势,不会有任何的变化。
应用这个样式:
看起来就是这样了。
Style果然是很好用啊,来看看这些样式都实现了什么。
处理这个问题需要请出React的State了。默认状态State是未按下(pressed为false),按下了改为pressed为true。就酱。
这需要用到
React Native填坑之旅–动画
React Native填坑之旅–HTTP请求篇
从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篇
- react-native-qiniu源码修改(实现文件上传,上传策略等)
- react-native:require含义
- 最近在学习react-native 为之后的找工作做准备
- Android React Native使用原生模块
- React Native之ViewPagerAndroid 组件
- ReactNative 4Android源码分析二: 《JNI智能指针之实现篇》
- react-native基础教程(1)
- React-native初体验之一个完整的Flexbox指南
- React Native填坑之旅--与Native通信之iOS篇
- React Native调试技巧与心得
- react-native(1)------mac安装、配置、使用
- React-Native 开发 android & ios App,共享一份代码
- react-native 创建新项目红屏解决方法
- ReactNative debug in Chrome 不能连接Chrome调试问题 (iOS)
- Android React Native环境配置以及第一个实例
- React Native学习指南
- React Js 与 Native 之间的通信
- 【React Native】之Native Modules