即使在使用 Scrollview 后也无法滚动

Question

这是我的代码，您可以在下面找到我无法滚动的图像。我尝试过使用 scrollview，也尝试过尺寸，还尝试在顶部添加视图标签，但仍然无法正常工作。我应该怎么做才能克服这种行为？我无法修复它并尝试了很多小时修复它但仍然无法实现滚动。


  const data = useContext(BlogContext);
  const singleBlog = data.filter((blog) => blog.title === route.params.title);

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.outer}>
        {singleBlog.length > 0 &&
          singleBlog.map((blog) => (
            <View key={Math.random()}>
              <Image source={{ uri: blog.image }} style={styles.blogImage} />

              <Text style={styles.title}>{blog.title}</Text>
              <View style={styles.authorAndDate}>
                <Text style={styles.author}>
                  <Text style={{ fontWeight: "500" }}>Wriiten by: </Text>
                  {blog.author === null ? "unknown" : blog.author}
                </Text>
                <Text style={styles.date}>
                  {new Date(blog.published_at).toDateString()}
                </Text>
              </View>
              <Text style={styles.description}>{blog.description}</Text>
            </View>
          ))}
        {/* <StatusBar style="light" /> */}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  blogImage: {
    width: "100%",
    height: "40%",
    marginBottom: 5,
  },
  title: {
    fontFamily: "Poppins_600SemiBold",
    textTransform: "capitalize",
    fontSize: 40,
    fontWeight: "600",
    paddingHorizontal: 10,
  },
  authorAndDate: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 10,
    borderBottomColor: "#BDBDBD",
    borderBottomWidth: 1,
    paddingBottom: 10,
    marginBottom: 10,
  },
  author: {
    fontFamily: "Poppins_500Medium",
    textTransform: "capitalize",
    fontSize: 18,
    fontWeight: "700",
    color: "#434343",
  },
  date: {
    color: "#878787",
    fontFamily: "Poppins_500Medium",
    textTransform: "capitalize",
    fontWeight: "500",
    fontSize: 14,
  },
  description: {
    color: "#555555",
    fontFamily: "Poppins_400Regular",
    fontWeight: "400",
    paddingHorizontal: 10,
    fontSize: 20,
    lineHeight: 31,
  },
  container: {
    flexGrow: 1,
    borderColor: "red",
    borderWidth: 4,
  },
  outer: {
    flex: 1,
    // borderColor: "red",
    borderWidth: 4,
  },
  inner: {
    flexGrow: 1,
  },
});

export default SingleBlogScreen;

enter image description here 在此图片中，我无法滚动。

Answer 1

我已经找到上述问题的解决方案将 blogImage 高度从 60% -> 600 更改解决了这个问题，现在滚动正在工作感谢@wojtek2939 的帮助....

即使在使用 Scrollview 后也无法滚动

Unable to scroll even after using Scrollview

scroll

scrollview

react-native

expo