我正在尝试使用包裹在
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);
}
}
图像完全显示的肖像
此处为横向模式我希望能够垂直滚动以查看整个图像
最佳答案
在您的平面列表中添加 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);
});
}
}
关于react-native - ScrollView : content image is cropped when phone is in landscape mode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56669733/