React本地物品响应迅速

Question

在正确和不正确的项目堆叠之间的示例

请访问图像。我有一个屏幕宽度为1440px，一个带有1080px的屏幕宽度。在1440屏幕上，该项目堆叠在两列结构中。在1080上，一切都堆叠在左列。有没有办法编写javascript函数，该功能查看设备宽度并设置项目以进行相应调整？

const Complex = () => {
return (
    <View style={{ flex: 1 }}>
        <CarouselCards />
        <Divider
            style={{
                color: 'black',
                backgroundColor: 'black',
                marginHorizontal: 15,
            }}
        />
        <ScrollView horizontal={false}>
            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                {KPI.map((item) => (
                    <View style={styles.cardContainer} key={item.id}>
                        <View style={{ flexDirection: 'row' }}>
                            <View
                                style={{
                                    flex: 1,
                                    flexWrap: 'wrap',
                                }}
                            >
                                <View style={styles.cardContent}>
                                    <Text style={styles.cardTitle}>{item.title}</Text>
                                    <Text style={styles.bigFatNumber}>{item.value}</Text>
                                    <Text style={styles.smallKPI}>{item.kpi}</Text>
                                    <View style={{display:' flex'}}>

                                    <BarChart
                                        style={{ height: 100, width: 130 }}
                                        data={barData}
                                        svg={{ fill }}
                                        contentInset={{ top: 1, bottom: 30 }}
                                    ></BarChart>
                                    </View>

                                </View>
                            </View>
                        </View>
                    </View>
                ))}
            </View>
        </ScrollView>
    </View>
)

导出默认复合物

const styles = StyleSheet.create({
cardContainer: {
    backgroundColor: '#fff',
    width: 168,
    height: 190,
    margin: 15,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
        width: 0,
        height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,
    padding: 15,
},
chartContainer: {
    backgroundColor: '#fff',
    width: 168,
    height: '100%',
    margin: 15,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
        width: 0,
        height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,
    padding: 15,
    flexWrap: 'wrap',
    display: 'flex',
},
cardTitle: {
    // letterSpacing: 0.25,
    fontStyle: 'normal',
    fontSize: 14,
},
cardContent: {
    alignItems: 'flex-start',
    flexWrap: 'wrap',
    gap: 6,
    paddingVertical: 5,
},
bigFatNumber: {
    letterSpacing: 0.25,
    lineHeight: 36,
    fontWeight: 'bold',
    fontStyle: 'normal',
    fontSize: 24,
},
smallKPI: {
    letterSpacing: 0.25,
    lineHeight: 24,
    fontWeight: 'bold',
    fontStyle: 'normal',
    fontSize: 14,
    order: 1,
    color: 'rgba(0, 0, 0, 0.6)',
},

}）

Answer 1

您可以使用device -width具有尺寸，您可以在react react本地获得 - https：//reactnative.dev/dev/dev/dev/docs/docs/docs/docs/dimensions/dimensions/dimensions 。是的，添加您的物品固定宽度（例如（宽度YOURMARGIN） / 3），或者您可以使用Flex且不使用固定宽度。

Answer 2

1. 使用

react-nortage-noreative-responsive-dimensions

Windows的NPM安装

npm i react-native-responsive-dimensions

2. 使用该导入

import {
  responsiveHeight as rh,
  responsiveWidth as rw,
  responsiveFontSize as rf,
} from "react-native-responsive-dimensions";

3. 如何使用

width:rw(100),
height:rh((100),
fontSize:rf(1.5),