Question

我必须在flex列中显示来自API的2张图像，它必须滚动，但问题是它不滚动并且图像不完整！这是我的代码：

    return (
            <View style={Styles.container}>
            {
              this.state.isLoading
          ?
          <ActivityIndicator size='large' color={Colors.mainYellow}/>
          :

          <View
            style={Styles.containerImg}
            contentContainerStyle={{alignItems: 'center'}}
          >

            <View style={Styles.containerImg}>
              <Image source={{uri: 'link to API' + this.state.privilegeData.link1}}
                style={Styles.imageStyle}
              />
            </View>
            <View style={Styles.containerImg}>
              <Image source={{uri: 'link to API' + this.state.privilegeData.link2}}
                style={Styles.imageStyle}
              />
            </View>

          </View>
            }
            </View>
    );

这是样式的代码：

    container: {
        flex: 1,
        backgroundColor: 'white',
      },

      containerImg: {
        flex: 1,
      },

      containerAI: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: wp('100%'),
        backgroundColor: 'white',
      },

  containerImg: {
    flex: 1,
    backgroundColor: 'red',

    // borderWidth: 1, borderColor: 'blue'
  },

      imageStyle: {
        flex: 1,
        width: wp('100%'),
      },

如果将resiMode添加到图像，则我的图像完整但被拉伸了，我想保持图像的高度并滚动

所以当我用ScrollView替换View标签（containerImg）时，我会出现一个红色屏幕，没有任何图像

Answer 1

如果仅想使用^$[0-9]{3}$ [0-9]{3}-[0-9]{4}$查看图像数组，则可以将图像包装在scrolling中。请参考我的示例。

应提高图像的高度，使其为'scrollview'，以免因过宽而损坏图像质量。

contain

在scrollView中显示图像不滚动

1 个答案: