Question

出于某种原因，当我将 imageBackgrounds 用作 ScrollView 中的项目列表时，它不会一直向下滚动，只是稍微移动了一点。这是问题的 screen recording。这是 React Native 16.13.1。当我为 Text 组件交换 ImageBackgrounds 时，ScrollView 工作得很好。

  <ScrollView>
     <View style={styles.menuItem}>
          <ImageBackground style={styles.imageBkg} source={Images[props.imgType]}>
            <Text style={styles.label}>{props.children}</Text>
            <View style={styles.overlay} />
          </ImageBackground>
      </View>
    
    <View style={styles.menuItem}>
          <ImageBackground style={styles.imageBkg} source={Images[props.imgType]}>
            <Text style={styles.label}>{props.children}</Text>
            <View style={styles.overlay} />
          </ImageBackground>
    </View>

  <View style={styles.menuItem}>
              <ImageBackground style={styles.imageBkg} source={Images[props.imgType]}>
                <Text style={styles.label}>{props.children}</Text>
                <View style={styles.overlay} />
              </ImageBackground>
        </View>
    
    <View style={styles.menuItem}>
          <ImageBackground style={styles.imageBkg} source={Images[props.imgType]}>
            <Text style={styles.label}>{props.children}</Text>
            <View style={styles.overlay} />
          </ImageBackground>
    </View>
 </ScrollView>


const styles = StyleSheet.create({
  menuItem: {
    height: 180,
    marginVertical: 5,
    backgroundColor: "blue",
  },
  imageBkg: {
    width: "100%",
    height: "100%",
    flexDirection: "column",
    justifyContent: "flex-end",
  },
  label: {
    elevation: 2,
    fontSize: 36,
    paddingLeft: "5%",
    paddingVertical: "2%",
    color: "white",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(37, 136, 37, .5)",
  },
});

Answer 1

我发现您的问题有两个可能的原因，首先是您的 menuItem 样式。您可能想要更改它以动态调整您的图像，在这种情况下使用“flex：1”并且不要将其设置为 180 的静态高度。第二个将是 imageBkg 样式，这是您可能想要的将高度静态设置为 180。

注意：

在某些情况下您可能不想使用 ImageBackground，因为实现是基本的。基于 react-native 文档 https://reactnative.dev/docs/imagebackground

从长远来看，使用 FlatList 而不是 ScrollView https://reactnative.dev/docs/scrollview 和 https://reactnative.dev/docs/flatlist

ScrollView 不会一直向下滚动，ImageBackground 组件反应原生

1 个答案: