---------------------------------------------------------------------------------------------------
React.native是facebook开源的一套基于JavaScript的开源框架,
很方便用来开发移动设备的app。
而且,方便及时更新app的UI与数据,也很方便部署。
goodmao希望帮助大家迅速上手掌握!
----------------------------------------------------------------------------------------------------
参考:
源码参考:
Layout.h/.c文件
----------------------------------------------------------------------------------------------------
我们这一节,简单介绍React按钮的使用,
目的是让大家在分分钟内理解并学会用法。
我同样也查看了n篇帖子和facebook的介绍贴(见上面链接),
一般来说,存在下面的问题:
1.无法直接让初学者粘贴到demo代码中理解并使用,
2.不少帖子翻译和编写都有不完善甚至错误之处。
我都自己编程运行过,在这里的讲解和案例,
为了方便大家,都专门编写了极其简单的例子,
但包含了最常用的、必须用的功能。
一、按钮简介:
按钮是用户进行交互的一个控件,用户可以点击触发事件的发生,从而让App执行对应的功能。
(1)React的按钮有三种
1.高亮触摸按钮 TouchableHighlight
按下时,按钮会有高亮效果。
即在该按钮上系统设置了一个视图,
当用户按下时,会让该视图变暗且透明度降低,提示用户该按钮被按下了。
2.透明触摸按钮 TouchableOpacity
按下时,按钮视图,会呈现半透明效果,并能看到按钮的背景视图。
3.无反馈触摸按钮 TouchableWithoutFeedback
按下时,按钮没有变化,但设置的响应方法会被系统调用。
(2)React按钮的事件处理
按钮关联了四个事件:
1.按钮按下事件:onPress - 按下并松开按钮,会触发该事件
2.按钮长按事件:onLongPress - 按住按钮不松开,会触发该事件
3.按钮按下事件:onPressIn - 按下按钮不松开,会触发该事件
4.按钮松开事件:onPressOut - 按下按钮后松开,或按下按钮后移动手指到按钮区域外,都会触发该事件
(3)按钮表现形式
1.文字按钮
在按钮上设置文字
2.图片按钮
在按钮上设置图片
图片来源,同样可以是直接添加到项目中的静态图片,也可以是来自网络的图片。
关于图片设置,可以参考上一节Image的使用介绍。
二、按钮的使用方法
(1)设置模式和创建React变量
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Text,
Image,
//1.高亮触摸
TouchableHighlight,
//2.不透明触摸
TouchableOpacity,
//3.无反馈触摸
TouchableWithoutFeedback,
} = React;
(2)定义样式
var styles = StyleSheet.create({
container: {
//flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'cyan',
},
size: {
width: 140,
height: 95,
},
buttonText: {
fontSize: 28,
color: 'white',
alignSelf: 'center'
},
button: {
width: 140,
height: 95,
//flex: 1,
//flexDirection: 'row', //子视图排成一行; 默认是排成一列
backgroundColor: 'blue',
borderColor: 'blue',
borderWidth: 1,
borderRadius: 8,
},
});
(3)创建组件对象
var HelloReact = React.createClass({
//定义按钮响应事件处理方法
//1.按键按下
onPressed_btn() {
console.log('button pressed !');
},
//2.长按
onLongPress_btn() {
console.log('button onLongPress !');
},
//3.被按下时 - 按下按钮不松开,会触发该事件
onPressIn_btn() {
console.log('button onPressIn !');
},
//4.松开按钮时
//- 按下按钮后松开,或按下按钮后移动手指到按钮区域外
onPressOut_btn() {
console.log('button onPressOut !');
},
//1.高亮触摸 TouchableHighlight - 按下时,按钮会有高亮效果
//2.透明触摸 TouchableOpacity - 按下时,按钮会半透明并能看到背景
//3.无反馈触摸 TouchableWithoutFeedback - 按下时,按钮没有变化,但绑定的响应方法会被系统调用
//渲染方法
render : function() {
return (
<View style={styles.container}>
<TouchableHighlight style = {styles.button} onPress={this.onPressed_btn}>
<Image
source={require('image!goodmao')}
style={styles.size}
/>
</TouchableHighlight>
<TouchableOpacity style = {styles.button} onPress={this.onPressed_btn}>
<Image
source={require('image!goodmao')}
style={styles.size}
/>
</TouchableOpacity>
<TouchableWithoutFeedback style = {styles.button} onPress={this.onPressed_btn}>
<Image
source={require('image!goodmao')}
style={styles.size}
/>
</TouchableWithoutFeedback>
</View>
);
}
});
说明:
1.定义了四个方法,用于处理按钮事件
方法名字,自己定义,注意可读性。
a.按键按下 onPressed_btn( )
b.长按 onLongPress_btn( )
c.被按下时 onPressIn_btn( )
d.松开按钮时 onPressOut_btn( )
2.关联按钮事件与事件处理方法
在按钮的属性中,指定按钮事件和对应的方法即可。
<TouchableHighlight
style = {styles.button}
onPress = {this.onPressed_btn}
onLongPress = {this.onLongPress_btn}
onPressIn = {this.onPressIn_btn}
onPressOut = {this.onPressOut_btn}
>
<Text style={styles.buttonText}>我是按钮</Text>
</TouchableHighlight>
(4)注册组件
AppRegistry.registerComponent('HelloReact', ()=>HelloReact);
(5)运行效果图
1.三种按钮
2.高亮按钮被按下
3.透明按钮被按下
4.无反馈按钮被按下
三、注意事项
(1)必须给按钮设置子视图
也就是说,按钮必须设置显示的文字或图片,否则会报错。
例如:
<TouchableHighlight style = {styles.button} onPress = {this.onPressed_btn}>
<Text style={styles.buttonText}>我是按钮</Text>
</TouchableHighlight>
编译运行时,Xcode错误如下:
message: Invariant Violation: onlyChild must be passed a children with exactly one child."
(2)设置文字按钮两种方法
<TouchableHighlight style = {styles.button} onPress = {this.onPressed_btn}>
<Text style={styles.buttonText}>我是按钮</Text>
</TouchableHighlight>
<TouchableHighlight style = {styles.button} onPress={this.onPressed_btn}>
<View style={styles.button}>
<Text style={styles.buttonText}>我是按钮</Text>
</View>
</TouchableHighlight>