React Native android 按钮的波纹效果
2016-08-19 11:21
573 查看
TouchableNativeFeedback
A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacingthat View with another instance of RCTView node with some additional properties set.
Background drawable of native feedback touchable can be customized with
backgroundproperty.
Example:
renderButton:
function()
{
return
( <TouchableNativeFeedback onPress={this._onPressButton}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={{width:
150, height:
100, backgroundColor:
'red'}}>
<Text style={{margin:
30}}>Button</Text>
</View> </TouchableNativeFeedback>
);},
Props
TouchableWithoutFeedback
props...
background backgroundPropType
Determines the type of background drawable that's going to be used to display feedback. It takes an object with typeproperty and extra data depending on the
type.
It's recommended to use one of the static methods to generate that dictionary.
Methods
static SelectableBackground(0)
Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground).
static SelectableBackgroundBorderless(0)
Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+.
static Ripple(color,
borderless)
Creates an object that represents ripple drawable with specified color (as a string). If property borderlessevaluates to true the ripple will render outside of the view bounds
(see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.
Parameters:
Name and Type | Description |
---|---|
color string | The ripple color |
borderless boolean | If the ripple can render outside it's bounds |
<Button background={ (Platform.OS === 'android') ? TouchableNativeFeedback.Ripple('#f39c12', true) : null } style={ styles.buttonStyle } textStyle={ styles.textStyle } onPress={ () => { console.log('world!') } }> Hello </Button>
检测平台如果是Android平台,就设置波纹效果
background={ (Platform.OS === 'android') ? TouchableNativeFeedback.Ripple('#f39c12', true) : null }
相关文章推荐
- Android Ripple 按钮水波纹效果(二)优化
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- reactnative LayoutAnimation 在android中没效果
- React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
- android 按钮水波纹效果
- android如何实现按钮的点击水波纹效果:
- 《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
- 仿android原生按钮点击水波纹效果
- 点击Android按钮跳转到React-native指定界面
- React-Native封装Tabbar 实现中间按钮溢出效果(Android/iOS)
- Android 5.0+ 自定义普通按钮的ripple波纹效果
- 使用react-native-pull实现跨平台Android&IOS下拉刷新滑动回弹效果
- React-Native系列Android——Touch事件原理及状态效果
- 点击Android按钮跳转到React-native指定界面
- Android自定义组件系列【14】——Android5.0按钮波纹效果实现
- Android 5.0+ 自定义普通按钮的ripple波纹效果
- Android 5.0+ 自定义普通按钮的ripple波纹效果
- android 类似于支付宝咻咻咻界面的按钮波纹效果
- React-Native爬过的坑,解决ListView 在Android手机上无吸顶效果
- Android 按钮水波纹效果