ReactNative

React Native 之Text組件的點擊

2017-10-08  本文已影响0人  IPFK

如何監聽Text組件的點擊事件?
用TouchableOpacity包裝起來即可

export default class Test1 extends Component {
    state={      //狀態機,當裏面的值改變的時候會重新運行render()函數,也就是相當於ios開發中的刷新UI介面了
        title:'默认值'
    }
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.click('点击')}//此處必須加()=>因為是回調
                                  onPressIn={()=>this.click('按下')}
                                  onPressOut={()=>this.click('抬起')}
                                  onLongPress={()=>this.click('长按')}
                >
                    <View>
                        <Text>{this.state.title}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
    click(event){
        this.setState({
            title:event
        })

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});
上一篇下一篇

猜你喜欢

热点阅读