React Native 使项目响应

Question

请参考图片。我有两台 Twee 手机，一台屏幕宽度为 1440 像素，另一台屏幕宽度为 1080 像素。在 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

您可以使用 React Native 中获得的 Dimensions 来获取设备宽度 - https://reactnative.dev/docs/dimensions。 Yust 添加您的项目固定宽度（类似于 (width-yourMargin) / 3），或者您可以使用 Flex 而不是使用固定宽度。

Answer 2

1. 使用

反应本机响应维度

使用关键字 npm install for windows

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),

Answer 3

您可以在项目中使用这个简单的包在不同设备中制作响应式布局和字体。

yarn add @harshitkishor/rn-responsive

  
// Import necessary functions and initialize the package
import { rpInitialize, rpFont, rpWidth, rpHeight, rpNormalize } from '@harshitkishor/rn-responsive';

// Initialize with initial dimensions in your Entry file App.tsx
rpInitialize({ height: initialHeight, width: initialWidth });


// Use responsive functions in your any components
const widthValue = rpWidth(100); // Get a responsive width value
const heightValue = rpHeight(50); // Get a responsive height value
const fontValue = rpFont(16); // Get a responsive font size

// Use the normalize function directly if needed
const normalizedWidth = rpNormalize(150, 'width'); // Normalize a size based on width
const normalizedHeight = rpNormalize(40, 'height'); // Normalize a size based on height

也可以查看这篇文章 - Medium Post