ScrollView:当手机处于横向模式时，内容图像被裁剪 [英] ScrollView: content image is cropped when phone is in landscape mode

问题描述

我正在尝试使用包裹在其中的一些图像来制作书籍阅读体验scrollViews 在 FlatList 中.

I'm trying to make a book reading experience using some images wrapped in scrollViews inside a FlatList.

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

everything is ok in 'portrait' mode but in 'landscape' the images are cropped, I want to be able to scroll vertically when in 'landscape' so the user can explore the whole image which becomes larger than screen height in 'landscape'

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

I've tried to modify the dimensions of the image depending on the orientation but the result is not good.

这是我的代码:状态

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

在代码的另一个地方触发的方向监听器:

orientation listener fired in another place of the code:

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

图像完全显示的肖像

这里的横向模式我希望能够垂直滚动以查看整个图像

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

推荐答案

我找到了解决我的问题的方法，基本上每次我改变方向时都会重新渲染 FlatList 并修改高度使其高于屏幕高度以启用滚动.

I found a solution to my issue by basically rerendering the FlatList every time i change orientation plus modifying height making it higher than screen high to enable scrolling.

1. 这是方向函数:

_orientationDidChange = (orientation) => {
    const $this = this;
    setTimeout(function() {
      let width = Dimensions.get('window').width;
      let height = Dimensions.get('window').height;

      if (orientation == 'LANDSCAPE') {
        // if LANDSCAPE make image height bigger than screen height to force vertical scroll
        // 2.7 is a value chosen after visual testing 
        height = height * 2.7;
      } else if (orientation == 'PORTRAIT' || orientation == 'PORTRAITUPSIDEDOWN') {
        // if PORTRAIT make image height smaller than screen height so we can have some marges 
        height = height * 0.98;
      }
      $this.setState({renderFlat: null, itemLayout: width,width: width, height: height}, () => {
        $this.renderFlat();
      });
    }, 50);
  }

1. 渲染 Flatlist 的函数:

renderFlat() {
    this.setState({
      renderFlat:
        (
          <FlatList
            horizontal={true}
            pagingEnabled={true}
            data={QuranImagePathList}
            keyExtractor={(item, index) => index.toString()}
            renderItem={this._renderItem}
            viewabilityConfig={this.state.viewabilityConfig}
            initialScrollIndex={this.state.currentPage}
            onViewableItemsChanged={this.handlePageChange}
            showsHorizontalScrollIndicator={false}
            getItemLayout={this.getItemLayout}
            removeClippedSubviews={true}
          />
        )
    })
  }

这篇关于ScrollView:当手机处于横向模式时，内容图像被裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！