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

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 道具，如下所示。

您可以将当前方向存储在 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);
        });
    }
}

Answer 2

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

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. 呈现平面列表的函数：

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