美文网首页ReactNative
React Native 之Text組件的點擊

React Native 之Text組件的點擊

作者: IPFK | 来源:发表于2017-10-08 21:21 被阅读0次

如何監聽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',
    }
});

相关文章

网友评论

    本文标题:React Native 之Text組件的點擊

    本文链接:https://www.haomeiwen.com/subject/ynyyyxtx.html