1. 程式人生 > >react-native入門——touchable系列按鈕使用

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