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}
            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 只支持一个子节点