ScrollView：当手机处于横向模式时，内容图像会被裁剪

我正在尝试使用一些包含在中的图像来创造读书体验scrollViews里面一个FlatList.

在“肖像”模式下一切正常，但在“风景”模式下图像被裁剪， 我希望能够在“横向”时垂直滚动，以便用户可以探索整个图像，该图像在“横向”中变得大于屏幕高度

我尝试根据方向修改图像的尺寸 但结果并不好。

这是我的代码： 状态

widthImage:Dimensions.get('window').width,
heightImage: Dimensions.get('window').height,

内容：

const QuranImage = [];
const scrollIsEnabled =  this.state.heightImage > this.state.height;
QuranImage.push(
    <ScrollView
        scrollEnabled = {scrollIsEnabled}
        onContentSizeChange = {this.manageScreenFlip}
        nestedScrollEnabled={true}
    >
        <Image style={{
                tintColor:'black',
                width:this.state.widthImage,
                height:this.state.heightImage,
            }}
            source={require('../Resources/page002.png')}
        />

     </ScrollView>
);

QuranImage.push(
    <ScrollView>
        <Image style={{
                tintColor:'black',
                width:this.state.width,
                height:this.state.height
        }}
        source={require('../Resources/page003.png')}/>
    </ScrollView>
)
this.setState({
    pdfViewer:(
        <FlatList
            horizontal={true}
            nestedScrollEnabled={true}
            pagingEnabled={true}
            data={QuranImage}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({item,index}) =>item}
        />
     )
});

方向侦听器在代码的另一个位置触发：

_orientationDidChange = (orientation) => {
    if (orientation === 'LANDSCAPE') {
        this.setState({
            height: Dimensions.get('window').height,
            width: Dimensions.get('window').width,
            heightImage:1000,
            widthImage:1000
        },() => {
            this.renderPdfViewer();
            console.log(Dimensions.get('window').height);
            console.log(Dimensions.get('window').width);
        });
    } else {
        console.log(orientation);
    }
}

portrait with image fully displayed

landscape mode here I want to be able to scroll vertically to see the entire image

Add key如下所示在您的平面列表中支持。

您可以将当前方向存储在 redux 存储中，并在组件中将其用作

const {orientation}= this.props

then

<FlatList
        horizontal={true}
        nestedScrollEnabled={true}
        pagingEnabled={true}
        data={QuranImage}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item,index}) =>item}
        key= { orientation =='PORTRAIT' || 
         orientation =='PORTRAITUPSIDEDOWN'?'portrait':'landscape' }
/>

将您的 _orientationDidChange 函数修改为

_orientationDidChange = (orientation) => {
    if (orientation === 'PORTRAIT' || orientation== 
'PORTRAITUPSIDEDOWN') {
        this.setState({
            height: Dimensions.get('window').height, 
            width: Dimensions.get('window').width,
            heightImage:1000,
            widthImage:1000
        },() => {
            this.renderPdfViewer();
            console.log(Dimensions.get('window').height);
            console.log(Dimensions.get('window').width);
        });
    } else {
        this.setState({
            height: Dimensions.get('window').width, 
            width: Dimensions.get('window').height,
            heightImage:1000,
            widthImage:1000
        },() => {
            this.renderPdfViewer();
            console.log(Dimensions.get('window').height);
            console.log(Dimensions.get('window').width);
        });
    }
}