React Native元件篇(四) — Touchable系列元件
阿新 • • 發佈:2019-02-02
Touchable元件是什麼
從字面上的意思我們就可以理解,Touchable是可觸控的控制元件,相當於我們iOS的簡單手勢。複雜的RN處理手勢還有專門的API如果你想實現檢視的拖拽,或是實現自定義的手勢,那麼請參閱PanResponder API或是手勢識別系統的文件。
Touchable現在主要有四種元件,TouchableHighlight 、TouchableOpacity 、 TouchableNativeFeedback 、 ouchableWithoutFeedback 。
-
一般來說,你可以使用TouchableHighlight來製作按鈕或者連結。注意此元件的背景會在使用者手指按下時變暗。
-
在Android上還可以使用TouchableNativeFeedback,它會在使用者手指按下時形成類似墨水漣漪的視覺效果。
-
TouchableOpacity會在使用者手指按下時降低按鈕的透明度,而不會改變背景的顏色。
Touchable元件程式碼演示
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, Text, TouchableHighlight, TouchableOpacity, } from 'react-native'; class RNHybrid extends Component { constructor(props) { super(props); this.state = {event:'TouchableOpacity', hightState:'TouchableHighlight'}; } render() { return( <View style={styles.container}> <TouchableHighlight activeOpacity = {0.5} underlayColor = 'yellow' onHideUnderlay={()=>this.hightStateSet('隱藏')} onShowUnderlay={()=>this.hightStateSet('顯示')} onPress={()=>this.hightStateSet('點選')} > <Text> {this.state.hightState} </Text> </TouchableHighlight> <TouchableOpacity underlayColor='blue' onPress={()=>this.touchEvent('點選')} onPressIn={()=>this.touchEvent('按下')} onPressOut={()=>this.touchEvent('擡起')} onLongPress={()=>this.touchEvent('長按')} > <Text> {this.state.event} </Text> </TouchableOpacity> </View> ); } hightStateSet(highSateStr){ this.setState({hightState:highSateStr}); } touchEvent(eventStr){ this.setState({event:eventStr}); } } const styles = StyleSheet.create({ container:{ marginTop:100, flexDirection:'row', flexWrap:'wrap', justifyContent:'space-around', }, }); AppRegistry.registerComponent('RNHybrid', () => RNHybrid);
效果: