react-native - ScrollView : content image is cropped when phone is in landscape mode

Question

我正在尝试使用包裹在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);
    }
}

图像完全显示的肖像

此处为横向模式我希望能够垂直滚动以查看整个图像

Answer 1

在您的平面列表中添加 key Prop ，如下所示。

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

const {orientation}= this.props

然后

<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);
        });
    }
}