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