在 scrollView 中显示图像不滚动

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

如果您只想查看带有scrolling 的图像数组，可以将图像包装在scrollview 中。请参考我的例子。

图片的高度应该提高到'contain'，以免太宽而损坏图片质量。

//This is an example code to understand Image//
import React, { Component } from 'react';
//import react in our code.
import { Text, Image, View, StyleSheet,ScrollView } from 'react-native';
//import all the components we are going to use.
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <ScrollView>
        <Image
          source={{
            uri:
              'http://aboutreact.com/wp-content/uploads/2018/07/sample_img.png',
          }}
          style={{ width: 400, height: 400, margin: 16,resizeMode: 'contain' }}
        />
        <Image
          source={{
            uri:
              'http://aboutreact.com/wp-content/uploads/2018/07/sample_img.png',
          }}
          style={{ width: 400, height: 400, margin: 16,resizeMode: 'contain' }}
        />
        <Image
          source={{
            uri:
              'http://aboutreact.com/wp-content/uploads/2018/07/sample_img.png',
          }}
          style={{ width: 400, height: 400, margin: 16,resizeMode: 'contain' }}
        />
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40,
    backgroundColor: '#ecf0f1',
  },
});