查看以使屏幕适合React Native

Question

大家好

我在react native中遇到了CSS问题，我想在没有ScrollView的情况下在屏幕中安装所有组件，但我似乎无法找出问题所在（我尝试更改边距或填充的值，但在每个设备中看起来都不一样）

正如你所看到的附加图像：

正如你所看到的，下面的图表不在屏幕上，我需要滚动查看图表（我不想要）

以下是css代码：（我删除了一些行以缩短代码（如旋转木马组件等）

 <View style={{ backgroundColor: "#fff" , flex: 1 }}>
  <LinearGradient
    colors={["#4c669f", "#3b5998", "#192f6a"]}
    start={[0, 0]}
    end={[1, 0]}
  >
    <View style={{ marginHorizontal: 20, paddingVertical: 48 }}>
      <View style={styles.imageContainer}>
        <View>
          <View style={styles.check}>
            <Ionicons name="md-checkmark" size={20} color={colors.pink} />
          </View>

          <Image
            source={require("../assets/profile-pic.jpeg")}
            style={{
              width: 100,
              height: 100,
              borderRadius: 32,
            }}
          />
        </View>
      </View>

      <View style={[styles.center, { marginVertical: 12 }]}>
        <Text style={styles.title}>
          {currentUser.name + " " + currentUser.lastName}
        </Text>
        <Text style={[styles.subTitle, { marginTop: 8 }]}>
          {businessDetails.bussinesName}
        </Text>
      </View>
    </View>
  </LinearGradient>
  <View style={styles.container}>
    <View style={styles.statContainer}>
      <Text style={styles.statNumber}>1,700₪</Text>
      <Text style={styles.stat}>הכנסה חודשית תופיע כאן</Text>
    </View>
  </View>
  <View style={styles.center}>
    <Text style={styles.textGraphTitle}>Graphs Analysis:</Text>
  </View>
  <View>
  </View>
</View>

）；

CSS:

     center: {
    alignItems: "center",
    justifyContent: "center",
  },
  imageContainer: {
    alignItems: "center",
    justifyContent: "center",
    marginTop: 1,
    shadowColor: colors.darkBg,
    shadowOffset: { height: 3, width: 1 },
    shadowOpacity: 0.5,
  },
  container: {
    paddingVertical: 24,
    paddingHorizontal: 32,
    marginBottom: 8,
    backgroundColor: colors.lightBg,
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 16,
    borderRadius: 16,
    marginTop: -48,
  },
  statContainer: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
  },

Answer 1

你在问响应式应用程序设计。基本上，您可以使用宽度和高度百分比或尺寸。

import { Dimensions} from 'react-native' 

const {width, height} = Dimensions.get('window')

还有一种方法是使用react-本地屏幕库