ReactNative开发——可触摸组件类型

来源：互联网发布：ubuntu安装软件编辑：程序博客网时间：2024/06/16 08:13

ReactNative开发——可触摸组件类型

可触摸的组件类型有：TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。

TouchableHighthight

本组件用于封装视图，使其可以正确响应触摸操作，当按下的时候，封住视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变量。

render() {    return (        <View style={styles.container}>            <TouchableHighlight  onPress={this._onPressButton}            >               <View style={{width:120,height:70,backgroundColor:'red'}}/>            </TouchableHighlight>        </View>    );}

我用adroid 测试机试了一下，然而并没有什么效果，目前不知道怎么回事。。。

TouchableNativeFeedback

用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈，目前它只支持一个单独的View实例作为子节点。

render() {    return (        <View style={styles.container}>            <TouchableNativeFeedback onPress={this._onPressButton}                                     background={TouchableNativeFeedback.Ripple('green',true)}            >                <View style={{width: 120, height: 70, backgroundColor: 'red'}}>                    <Text style={{margin: 30}}>Button</Text>                </View>            </TouchableNativeFeedback>        </View>    );}

在android机上，这个亲测有效果哦~

注意他的background属性接受的是一个拥有type属性的对象，推荐使用一下三种静态方法来设置：

TouchableNativeFeedback.SelectableBackground()会创建一个对象，表示安卓默认的对于被选中对象的背景(?andorid:attr/selectableItemBackground)。
2.TouchableNativeFeedback.SelectableBackgroundBorderless()会创建一个对象，表示Android主题默认的对于被选中的无边框对象的背景（?android:attr/selectableItemBackgroundBorderless）。只有在Android API level 21+使用。
3.TouchableNativeFeedback.Ripple(color, borderless)会创建一个对象，当按钮被按下时产生涟漪效果，可以通过传入color设置颜色，如果参数borderless为true,那么涟漪效果还会渲染到视图以外。同样在Android API level21+ 上使用。

TouchableOpacity

本组件用于封装视图，被按下时，封装的视图的不透明度会降低。

render() {    return (        <View style={styles.container}>            <TouchableOpacity onPress={this._onPressButton}                              activeOpacity={0.1}            >                <View style={{width: 120, height: 70, backgroundColor: 'red'}}>                    <Text style={{margin: 30}}>Button</Text>                </View>            </TouchableOpacity>        </View>    );}

其中activeOpacity代表透明度指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）。默认值为0.2

TouchableWithoutFeedback

除非你有什么好的理由，否则不要使用这个组件，本组件没有任何视觉反馈。。。

onButtonPress() {    console.log(new Date().getTime())}onButtonLongPress(){    console.log(new Date().getTime())}render() {    return (        <View style={styles.container}>            <TouchableWithoutFeedback onPress={this.onButtonPress}                                      onLongPress={this.onButtonLongPress}                                      delayLongPress={5000}            >                <View style={{width: 120, height: 70, backgroundColor: 'red'}}>                    <Text style={{margin: 30}}>Button</Text>                </View>            </TouchableWithoutFeedback>        </View>    );}

上面的代码中 delayLongPress用来设置在按下多少秒后触发onLongPress事件，我设置5000 所以在按下5秒后触发onLongPress事件回调。更多设置可以参考文档：
http://reactnative.cn/docs/0.44/touchablewithoutfeedback.html#content

参考

http://reactnative.cn/docs/0.44/touchablewithoutfeedback.html#content

阅读全文

0 0