javascript - 如何在 React-native 的 ScrollView 中使用 flex-wrap

Question

我无法在 ScrollView 容器内使用 flexWrap 属性。

我的代码是这样的

function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        <LayoutButton
          navigation={navigation}
          title={"go to setting"}
          path="Setting"
        />
        
      </ScrollView>
      <StatusBar style="auto" />
    </View>
  );
}

这个的样式是

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    flexWrap: "wrap",
  },
  scrollContainer: {
    backgroundColor: "#B7C3F3",
    width: "100%",
    flexWrap: "wrap",
  },
});

我不知道 flex 是否在 ScrollView 下工作。我是本地人的新手，请帮助我解决这个问题，在此先感谢

Answer 1

要在 React Native 中的 ScrollView 容器内使用 flexWrap 属性，您需要确保 ScrollView 容器具有固定的高度。这是因为 ScrollView 容器的默认高度为“自动”，这不允许 flexWrap 属性起作用。

要解决此问题，您可以将高度属性添加到 ScrollView 容器的样式，并将其设置为固定值。例如:

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
flexWrap: "wrap",
},
scrollContainer: {
backgroundColor: "#B7C3F3",
width: "100%",
flexWrap: "wrap",
height: "100%", // Add a height property with a fixed value
},
});