Rn 元件的學習

TouchableOpacity | View | Text | Button | TextInput | Image

<TouchableOpacity 
    activeOpacity= {0.7}  //按下時的透明度
    disabled= {false}    
    onPress = {() => {}}
    onLongPress= {() => {}}
    onPressIN = {() => {}}
    onPressOut = {() => {} }
>
    <View style={styles.junViewStyle}>
        <Text
            style={styles.textStyle}
            numberOfLines={1
 
}           // 行數
            selectable= {() => {}}      // 長按 複製貼上
            includeFontPadding={false}  // android  清除頂部和底部預設的留白2px
            onPress= {() => {}}
            onLongPress= {() => {}}
            onLayout = {() => {}}      //{nativeEvent: {layout: {x, y, width, height}}}
        >展示文字，selectable為true
 
時，使用者長按選擇文字</Text>
        <Button
            disabled
            onPress={() => {}}
        />
        <TextInput 
            placeholder='預設沒有邊框'
            placeholderTextColor= '#333'
            multiline={true}  // 文字預設垂直居中，設定下一個屬性
            style={textAlignVertical: 'top'} //
 
讓其居頂
            selectColor= '#eee'
            autoFocus= {true}  //在componentDidMount會自動獲取焦點
            underlineColorAndroid={"transparent"}  //去掉安卓的底邊框
            editable= {false}
            secureTextEntry={true}  // 輸入為密碼框不顯示輸入字元
            maxLength={15}
            keyboardType={'numeric'}  //純數字鍵盤
            clearTextOnfocus={true}
            enablesReturnKeyAutomatically= {true}
            onBlur={() => {}}
            onFocus= {() => {}}
            onChange={() => {}}
            onChangeText={(changeText) => {}}
            onEndEditing= {() => {}}
            onSubmitEditing={() => {}}
            onLayout= {(x, y, width, height) => {}}
            onScroll={() => {}}
            onKeyPress={({nativeEvent: {key: keyValue}}) => {}}
            onContentSizeChange= {(event) => {}}
        />
        <Image 
            style={styles.imageStyle}
            source={require('./BenzImage/Benz-GLA1.jpg')}
        />
        <Image 
            style={styles.imageStyle}
            source={require('./BenzImage/Benz-GLA1.jpg')}
        />
        <Image 
            style={styles.imageStyle}
            source={{uri: 'Benz-GLA2'}}
        />
        <Image
            style={{width:30,height:30,resizeMode:'stretch'}}
            blurRadius={0}
            source={{uri: 'http://upload_images.com/...'}}
            onLoad={()=>{console.log("圖片載入完成")}}
            onLoadStart={()=>{ console.log('圖片開始載入')}}
            onLoadEnd={()=>{console.log('圖片載入結束')}}
            onProgress={(progress)=>{console.log(progress.nativeEvent.total)
                        console.log(progress.nativeEvent.loaded)}}
            onError={()=>{alert('圖片載入錯誤')}} 
       />
    </View>
</TouchableOpacity>

# TouchableOpacity注意事項：onPress與onPressIN/onPressOut有衝突，不要同時使用

# Button注意事項：設定style不生效，一般開發不用button

# TextInput的其他方法：isFocused(): boolean //返回值表明當前輸入框是否獲得了焦點。|| clear() //清空輸入框的內容。onContentSizeChange 可以自動獲取文字的高度event.nativeEvent.contentSize.height

 {
  nativeEvent: {
    contentSize: {
      width: number,
      height: number
    }
  }
}

# Image若獲取網路資源，樣式必須有寬高

# Text 內部不再使用flexbox佈局

# TouchableHighlight 只支援一個子節點