react-native入門——touchable系列按鈕使用

一、Touchable系列組件
     Touchable系列組件可以包裹一層根View,響應點擊變化和點擊事件
   1.1  例如TouchableWithoutFeedback,只可以處理點擊或長按響應,不能修改點擊的顏色透明度變化,使用代碼例子如下:
     <TouchableWithoutFeedback
        onPress={
            ()=>{
                this.setState({
                    count: this.state.count+1
                    })
            }
        }
        onLongPress={
            ()=>{
                Alert.alert('提示','確認刪除嗎?',[
                    {text:'取消',onPress:()=>{},style:'cancel'},
                    {text:'確定',onPress:()=>{}},
                ])
            }
        }>
            <View style={styles.button}>
                 <Text style={styles.buttonText}>
                 我是TouchableWithoutFeedback,單擊我
                 </Text>    
            </View>
            </TouchableWithoutFeedback>
            <Text style={styles.text}>您單擊了:{this.state.count}次</Text>
        </View> 
  1.1.1、 按鈕在請求網絡時不允許再次點擊,disable
      使用例子:    
            onPress={
            ()=>{
                this.setState({
                    count: this.state.count+1,
                    text:'正在登錄...',
                    waiting:true
                    })
                    setTimeout(()=>{
                        this.setState({text:'網絡不流暢',waiting:false})
                    },2000);
            }
        }
    1.2、 TouchableHighlight :設置按下的不透明度,可以通過屬性underLayColor設置TouchableHighLight被按下時的不透明度
            underlayColor: 設置TouchbleHighLight按下去的顏色,默認黑色
            activeOpacity: 不透明度   
           使用例子:
                   <TouchableHighlight
        activeOpacity={0.7}
        underlayColor='green'
        onPress={
            ()=>{
                this.setState({
                    count: this.state.count+1,
                    text:'正在登錄...',
                    waiting:true
                    })
                    setTimeout(()=>{
                        this.setState({text:'網絡不流暢',waiting:false})
                    },2000);
            }
        }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章