Rn 常见的六个组件学习

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}
            selectable= {false}
            onPress= {() => {}}
            onLongPress= {() => {}}
        >展示文本，selectable为true时，用户长按选择文本</Text>
        <Button
            disabled
            onPress={() => {}}
        />
        <TextInput 
            placeholder='默认没有边框'
            placeholderTextColor= '#333'
            selectColor= '#eee'
            autoFocus= {true}
            editable= {false}
            secureTextEntry={true}
            maxLength={15}
            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若获取网络资源，样式必须有宽高