在 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-native-screens库