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);

            }

        }