Question

我已经多次见过相同的问题，但是我发现的所有解决方案都不适合我。

退回零件

<View style={styles.root}>
      <ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled={true}>
        <View style={styles.dpArea}>
          <Image
            source={{
              uri: "URI GOES HERE",
            }}
            style={{ width: "100%", height: "100%" }}
            resizeMode="contain"
          />
        </View>
        <View style={styles.nameArea}>
          <View style={{ flex: 8, alignItems: "center" }}>
            <Text style={styles.nameText}> {nameUpper}</Text>
          </View>
          <View style={{ flex: 2, paddingLeft: 10 }}>
            <MaterialIcons name="edit" size={24} color="gray" />
          </View>
        </View>
        <View style={styles.emailArea}>
          <Text
            style={{
              fontFamily: "Reg",
              fontSize: 12,
              color: "gray",
              marginRight: 4,
            }}
          >
            Logged in using
          </Text>
          <Text style={{ fontFamily: "Reg", fontSize: 12 }}>{email}</Text>
        </View>
        <View style={styles.statsArea}>
          <StatsContainer text="STAT 1" number="41" />
          <StatsContainer text="STAT 2" number="93" />
        </View>
        <View style={styles.feedbackArea}>
          <Text style={{ fontFamily: "Bold", fontSize: 12, color: "gray" }}>
            Send feedbacks, feature requests or report bugs:
          </Text>
          <FeedbackArea content={feedback} />
        </View>
        <View style={styles.logoutArea}>
          <GenButton content="LOGOUT" />
          <DeleteAcButton content="DELETE ACCOUNT" />
        </View>
        <View style={styles.madeByArea}>
          <Text style={styles.madebyText}>Developed by:</Text>
        </View>
      </ScrollView>
    </View>

StyleSheet：

 root: {
    flex: 1,
  },

  dpArea: {
    height: "30%",
    marginTop: 20,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
  },
  nameArea: {
    height: "10%",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
  },
  emailArea: { height: "10%", flexDirection: "row", justifyContent: "center" },
  statsArea: { flexDirection: "row", height: "20%", marginBottom: "10%" },
  feedbackArea: { height: "20%", marginHorizontal: "5%" },
  logoutArea: {
    width: "100%",
    justifyContent: "space-around",
    alignItems: "center",
    height: "30%",
    marginVertical: "5%",
  },
  madeByArea: {
    height: "10%",
    justifyContent: "flex-end",
    alignItems: "center",
    marginBottom: 3,
  },
  madebyText: {
    fontFamily: "Reg",
    fontSize: 12,
    color: "gray",
  },
  nameText: {
    fontFamily: "Bold",
    fontSize: 30,
  },

我尝试过的操作：使scrollview成为父组件，在根视图中包装scrollview，在contentContainerStyle中将flex＆flexGrow = 1，在ScrollView样式参数中将flex＆flexGrow = 1。

我观察到的是，如果我将任何文本的字体大小更改为300，则滚动可以工作，但并非所有组件都被渲染，但是，以正常的字体大小，即使页面超出了屏幕大小，也没有滚动。

我认为这是由于样式表的配置方式所致，但无法找到错误。

滚动在ScrollView中不起作用（React Native）

0 个答案: