React Native使项响应

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

export default Complex

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 - https://reactnative.dev/docs/dimensions中获得device-width和Dimensions。你只需要给你的项目添加固定宽度(比如(width- yourmargin)/3)，或者你可以使用flex而不使用固定宽度。

Answer 2

1. 使用

react-native-responsive-dimensions

使用关键字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),