javascript React native ScrollView没有滚动

y1aodyip  于 2024-01-05  发布在  Java
关注(0)|答案(2)|浏览(220)

我尝试使用Flatlist,它也不工作。在FlatList上,它不会显示图像,所以我无法测试它。在ScrollView上,它正在显示,但它不会滚动。下面是我的代码,请帮助:

  1. import { ScrollView, StyleSheet, View, Image } from "react-native";
  2. import React from "react";
  3. const StylistFeatures = ({ businessFeatures }) => {
  4. const { wifi, walkIn, appointments, toHome, celebrityStylist, covidMask } =
  5. businessFeatures;
  6. return (
  7. <View
  8. style={{
  9. alignSelf: "center",
  10. flexDirection: "row",
  11. width: "100%",
  12. height: "14%",
  13. }}
  14. >
  15. <ScrollView
  16. horizontal
  17. scrollEnabled
  18. showsHorizontalScrollIndicator={false}
  19. contentContainerStyle={styles.contentContainerFlatListStyle}
  20. style={{ flexGrow: 1, padding: 10 }}
  21. >
  22. <View style={styles.imageContainerStyle}>
  23. {wifi ? (
  24. <Image
  25. source={require("../assets/images/design-icon/wifi.png")}
  26. style={styles.imageStyle}
  27. />
  28. ) : null}
  29. </View>
  30. <View style={styles.imageContainerStyle}>
  31. {walkIn ? (
  32. <Image
  33. source={require("../assets/images/design-icon/walk.png")}
  34. style={styles.imageStyle}
  35. />
  36. ) : null}
  37. </View>
  38. <View style={styles.imageContainerStyle}>
  39. {appointments ? (
  40. <Image
  41. source={require("../assets/images/design-icon/calendar.png")}
  42. style={styles.imageStyle}
  43. />
  44. ) : null}
  45. </View>
  46. <View style={styles.imageContainerStyle}>
  47. {toHome ? (
  48. <Image
  49. source={require("../assets/images/design-icon/car.png")}
  50. style={styles.imageStyle}
  51. />
  52. ) : null}
  53. </View>
  54. <View style={styles.imageContainerStyle}>
  55. {celebrityStylist ? (
  56. <Image
  57. source={require("../assets/images/design-icon/celebrity.png")}
  58. style={styles.imageStyle}
  59. />
  60. ) : null}
  61. </View>
  62. <View style={styles.imageContainerStyle}>
  63. {covidMask ? (
  64. <Image
  65. source={require("../assets/images/design-icon/safety-mask.png")}
  66. style={styles.imageStyle}
  67. />
  68. ) : (
  69. <Image
  70. source={require("../assets/images/design-icon/no-mask.png")}
  71. style={styles.imageStyle}
  72. />
  73. )}
  74. </View>
  75. </ScrollView>
  76. </View>
  77. );
  78. };
  79. export default StylistFeatures;
  80. const styles = StyleSheet.create({
  81. contentContainerFlatListStyle: {
  82. width: "100%",
  83. alignItems: "center",
  84. height: "100%",
  85. },
  86. imageStyle: {
  87. width: 40,
  88. height: 40,
  89. margin: 5,
  90. },
  91. imageContainerStyle: {
  92. marginRight: 12,
  93. borderColor: "black",
  94. borderWidth: 1,
  95. borderRadius: 10,
  96. },
  97. });

字符串
请帮帮我,有什么原因吗?是不是有什么不好的东西造成了没有卷轴?
下面是一个截图:

hwazgwia

hwazgwia1#

尝试删除“contentContainerFlatListStyle”width属性,然后再试一次。如下所示。它应该可以工作。让我知道它的进展。

  1. contentContainerFlatListStyle: {
  2. alignItems: "center",
  3. height: "100%",
  4. },

字符串

4szc88ey

4szc88ey2#

对我来说,ScrollView不起作用,因为它由于某些原因被<TouchableWithoutFeedback></TouchableWithoutFeedback>标签 Package 。

相关问题