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 提供了默认导航栏按钮,具体请参看导航栏按钮

results matching ""

    No results matching ""