RN系统组件一

作者: zhang_pan | 来源:发表于2024-03-27 08:54 被阅读0次

1. View: UI构建的基石，一切页面的起点

flexDirection：横向纵向布局
flexGrow和flex的比较
尺寸属性传数值和百分比
position: absolute绝对定位下仍然受父级属性影响

import { StyleSheet, View } from "react-native"

export default () => {
    return (
        <View style={styles.root}>
            <View style={styles.subView1}></View>
            {/* <View style={styles.subView2}></View>
            <View style={styles.subView3}></View> */}
        </View>
    )
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#c0c0c0',
        flexDirection: 'row',
        justifyContent: 'center'
    },
    subView1: {
        width: 100,
        height: 100,
        backgroundColor: 'red',
        position: 'absolute',
    },
    subView2: {
        width: 100,
        height: 100,
        backgroundColor: 'blue'
    },
    subView3: {
        width: 100,
        height: 100,
        backgroundColor: 'yellow'
    },

});

由于subView1在主轴上是居中的，即使被position: 'absolute'修饰，但是由于没有主轴方向上的位置，即这里的left和right，所以subview1这里还是居中的，如果想要其距离左边20，在 justifyContent: 'center'不动的情况下，只需要subView1加入left: 20即可，即

subView1: {
        width: 100,
        height: 100,
        backgroundColor: 'red',
        position: 'absolute',
        left: 20
    },

onLayout布局信息的回调

import { useEffect, useState } from "react"
import { StyleSheet, View } from "react-native"

export default () => {
    const [height, setHeight] = useState(100);

    useEffect(() => {
        setTimeout(() => {
            setHeight(200);
        }, 2000);
    })
    return (
        <View style={styles.root}>
            <View 
                style={[styles.subView1, {height}]}
                onLayout={event => {
                    console.log(event.nativeEvent)
                }}>
            </View>
            {/* <View style={styles.subView2}></View>
            <View style={styles.subView3}></View> */}
        </View>
    )
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#c0c0c0',
        flexDirection: 'row',
        justifyContent: 'center'
    },
    subView1: {
        width: 100,
        backgroundColor: 'red',
        position: 'absolute',
        left: 20
    },
    subView2: {
        width: 100,
        height: 100,
        backgroundColor: 'blue'
    },
    subView3: {
        width: 100,
        height: 100,
        backgroundColor: 'yellow'
    },

});

setNativeProps：性能瓶颈下的选择余地

useEffect(() => {
        setTimeout(() => {
            setHeight(200);
            viewRef.current.setNativeProps({
                style: {
                    backgroundColor: 'yellow'
                }
            })
        }, 2000);
    })
    return (
        <View style={styles.root}>
            <View
                ref={viewRef}
                style={[styles.subView1, {height}]}
                onLayout={event => {
                    console.log(event.nativeEvent)
                }}>
            </View>
            {/* <View style={styles.subView2}></View>
            <View style={styles.subView3}></View> */}
        </View>
    )

2. Text：使用占比最高的组件，使用简单，深入复杂

字体属性：fontSize、fontFamily、fontWeight
行数以及修改模式：numberOfLines、ellipsizeMode
是否可选中以及选中色号：selectable、selectionColor
点击和长按：onPress、onLongPress
跟随系统字号：allowFontScaling
文字嵌套及注意事项
文本对齐：textAlign、textAlignVertical
文本装饰：textDecorationStyle、textDecorationLine
文字阴影：textShadowColor、textShadowOffset、textShadowRadius一起使用

TextDemo.js

import { StyleSheet, Text, View } from "react-native"

export default () => {
    return <View style={styles.root}>
        <Text 
            style={styles.txt}
            numberOfLines={1}
            ellipsizeMode="tail"
            selectable={true}
            selectionColor='#1876FF'
            onPress={(event) => {
                console.log(event.nativeEvent);
            }}
            onLongPress={(event) => {
                console.log(event.nativeEvent);
            }}
            allowFontScaling={false}
        >
            我是一个文本
        </Text>
    </View>
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#c0c0c0'
    },

    txt: {
        width: 300,
        height: 50,
        fontSize: 20,
        fontWeight: 'bold',
        backgroundColor: 'yellow',
        textAlign: 'center',
        textAlignVertical: 'center',
        // textDecorationStyle: 'solid',
        // textDecorationLine: 'underline',
        textShadowColor: '#A0A0A0',
        textShadowOffset: {width: 2, height: 4},
        textShadowRadius: 8
    }
})

3. Image：精美的UI从使用图片开始

图片源的两种类型：source
缩放模式：resizeMode
blurRadius：曾经的难题现在如此简单
占位图片：defaultSource
渐入动画时间：fadeDuration
加载成功和加载失败：onLoad、onError
加载开始和加载结束：onLoadStart、onLoadEnd
着色：tintColor

ImageDemo.js

import { View, Image, StyleSheet } from "react-native"
import { imageUri } from '../constants/Uri.js'

import avator from '../assets/images/avatar.png'
import setting from '../assets/images/icon_setting.png'
import { useEffect } from "react"

export default () => {
    return <View style={styles.root}>
        <Image 
            style={styles.img}
            source={setting}
            // source={{ uri: 'xxxx' }}
            // source={avator}
            // fadeDuration={3000}
            // blurRadius={3}
            onLoad={(event) => {
                console.log(event.nativeEvent);
            }}
            onError={(event) => {
                console.log(event.nativeEvent);
            }}
            onLoadStart={(event) => {

            }}
            onLoadEnd={(event) => {

            }}
        />
    </View>
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#c0c0c0'
    },
    img: {
        width: 200,
        height: 200,
        resizeMode: 'contain',
        tintColor: 'white'
    }
})

api: Image.getSize()、Image.prefetch()

useEffect(() => {
        Image.getSize(imageUri, (width, height) => {
            console.log(`width: ${width}, height: ${height}`)
        }, (error) => {
            console.log(error);
        })

        Image.prefetch(imageUri).then((result) => {
            console.log(result);
        }).catch(e => {
            console.log(e);
        })
    }, [])

4. ImageBackground：View和Image的合体

style和imageStyle
ref和imageRef

ImageBackgroundDemo.js

import { ImageBackground, StyleSheet, View, Image, Text } from "react-native"
import bg_card from '../assets/images/bg_card.png'
import icon_bank from '../assets/images/icon_bank.png'

export default () => {
    return <View style={styles.root}>
        <ImageBackground
            style={styles.imageBackgroundStyle}
            imageStyle={styles.imageStyle}
            source={bg_card}
        >
            <Image 
                style={styles.imgStyle}
                source={icon_bank}
            />
            
            <View style={styles.txtContainer}>
                <Text style={styles.topDesc}>
                    招商银行
                </Text>
                <Text style={styles.middleDesc}>
                    储蓄卡
                </Text>
                <Text style={styles.lastDesc}>
                    ●●●●   ●●●●   ●●●●  3068
                </Text>
            </View>
            

        </ImageBackground>
    </View>
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        flexDirection: 'column',
        padding: 10
    },
    imageBackgroundStyle: {
        width: '100%',
        height: 150,
        flexDirection: 'row',
    },
    imageStyle: {
        borderRadius: 12,
        resizeMode: 'cover'
    },
    imgStyle: {
        width: 48,
        height: 48,
        marginTop: 20,
        marginLeft: 20,
    },
    txtContainer: {
        width: '100%',
        height: '100%',
        flexDirection: 'column',
        marginTop: 20,
        marginLeft: 20,
    },
    topDesc: {
        fontSize: 18,
        fontWeight: 'bold',
        color: 'white'
    },
    middleDesc: {
        fontSize: 16,
        color: 'A0A0A0',
        marginTop: 5
    },
    lastDesc: {
        color: 'white',
        marginTop: 30
    },
});

5. TextInput：唯一且强大的输入组件

字体样式：和Text一致
自动聚焦：autoFocus和focus
自动失焦：blurOnSubmit和blur()
隐藏光标：caretHidden
默认输入：defaultValue
可编辑性：editable
键盘类型：keyboardType

  1) default
  2) number-pad
  3) decimal-pad
  4) numeric
  5) email-address
  6) phone-pad

确定键配置：returnKeyType

  1) done
  2) go
  3) next
  4) search
  5) send

最大长度：maxLength
多行输入：multiline和numberOfLines
焦点回调：onBlur和onFocus
内容回调：onChange和onChangeText
选中相关：selection、selectionColor、selectTextOnFocus
对齐方式：textAlign和textAlignVertical
安全模式：secureTextEntry

textInputDemo.js

import React, { useRef, useEffect } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  TextInput
} from 'react-native';

export default () => {

    const inputRef = useRef(null);

    useEffect(() => {
        setTimeout(() => {
            // inputRef.current.blur();
        }, 2000);
    }, []);

    return (
        <View style={styles.root}>
            <TextInput
                ref={inputRef}
                style={styles.input}
                // autoFocus={true}
                blurOnSubmit={true}
                caretHidden={false}
                // defaultValue="默认内容"
                editable={true}
                keyboardType='number-pad'
                returnKeyType='search'
                // maxLength={11}
                // multiline={true}
                // numberOfLines={2}
                onFocus={() => {
                    
                }}
                onBlur={() => {

                }}
                onChange={(event) => {
                    console.log(event.nativeEvent);
                }}
                onChangeText={(text) => {
                    console.log(text);
                }}
                // selection={{start: 0, end: 3}}
                selectionColor='red'
                selectTextOnFocus={true}
                secureTextEntry={true}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#F0F0F0',
    },
    input: {
        width: '100%',
        height: 56,
        backgroundColor: '#D0D0D0',
        fontSize: 24,
        color: '#333333',
        fontWeight: 'bold',
    },
});

RN系统组件一

1. View: UI构建的基石，一切页面的起点

2. Text：使用占比最高的组件，使用简单，深入复杂

3. Image：精美的UI从使用图片开始

4. ImageBackground：View和Image的合体

5. TextInput：唯一且强大的输入组件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读