Button
React-Native 原生提供的Touchable
组件并不是十分好用,因此,CRN 框架基于Touchable
组件封装了Button
组件。
Button
组件有下列属性:
onPress {Function} 按钮点击事件的回调函数
示例:
<
Button opPress = {() =
>
{alert('按钮点击事件');}}
>
通用属性
style 按钮样式,支持 View 的所有样式。
示例:
<
Button
onPress = {() =
>
{alert('按钮点击事件');}}
style={{backgroundColor:'yellow', borderWidth:1, borderColor:'green'}}
>
Go to Page2
<
/Button
>
图片按钮相关属性
imageSource {uri:string} 图片资源标识,与`Image`组件的`source`属性一致。
imageStyle {width:number, height:number} 支持设置图片的宽度与高度
imageInset {top:number, right:number, bottom:number, left:number} 图片与按钮内边距。
示例:
<
Button
imageSource = {{uri:'common_btn_back_arrow'}}
imageStyle = {{width:22, height:22}}
imageInset = {{top:11, right:11, bottom: 11, left:11}}
style={{width:44, height:44, backgroundColor:'red'}}
onPress = {() =
>
{alert('图片按钮');}}
>
<
/Button
>
文字按钮相关属性
textStyle 支持`Text`组件支持的`style`
示例:
<
Button
onPress = {() =
>
{this.pop();}}
style={{backgroundColor:'rgb(222,100,22)'}}
textStyle = {{fontSize:15, color:'white'}}
>
返回上一页
<
/Button
>
导航栏按钮
CRN 提供了默认导航栏按钮,具体请参看导航栏按钮。