android 构建 apk 方向更改时，为什么 Flatlist 无法正确呈现？

Question

我正在使用 expo 构建食品储藏室服务应用程序，我正在从节点食品储藏室服务器获取项目列表，然后使用 Flatlist 在应用程序上呈现它们。

除一件事外，一切都按预期工作，那就是方向改变时的平面列表渲染。
使用 expo 应用进行测试时，即使方向发生变化，它也能完美运行。
问题：构建 android apk 并在设备 flatlist 上测试它时不再按预期呈现，例如：

-> 以纵向模式启动应用程序时，您可以一直滚动到底部，但是当您旋转设备时，我无法一直滚动到底部，或者看起来我可以，但其余部分这些项目似乎超出了设备显示边界。

-> 相反，当我以横向模式启动应用程序时，我可以毫无问题地滚动到底部，但是当我将方向更改为纵向时，平面列表仅在屏幕的一半处呈现，我仍然能够滚动到它的末尾。

我试过传递给 extraData 以及将 flexgrow 添加到 contentContainerStyle，我也试过使用 ScrollView 而不是 View，但没有明显的改进。

const [refreshing,setRefreshing] = useState(false)

ScreenOrientation.addOrientationChangeListener(
    evt => {
      setCurrOrientation(evt.orientationInfo.orientation)
      setRefreshing(!refreshing)
    }
  )

ScreenOrientation.getOrientationAsync().then(result => setCurrOrientation(result.orientation))

keyExtractor = (item, index) => index.toString()

  renderItem = ({ item,index }) => (
    <ListItem
      key={index}
      leftAvatar={{ source: { uri: BASE_URL + ':' + PORT + '/uploads/' + item.rowid + '/image.png' } }}
      title={<Text style={{ fontFamily: 'fake-receipt' }}>{item.item_name}</Text>}
      subtitle={<Text style={{ fontFamily: 'fake-receipt', color: 'grey', fontSize: 10 }}>{item.item_type}</Text>}
      containerStyle={{ borderBottomColor: '#F0F0F0', borderBottomWidth: 1, borderBottomStartRadius: 10, borderTopStartRadius: 10 }}
      onPress={() => {
        setSelectedItemIndex(index);
        setSelectedItemRowID(item.rowid);
        setSelectedItemSugarCondition(item.sugar === 'yes' ? 'yes' : 'no');
        setOverlayVisible(true);
      }}
      rightIcon={<IconFA name={'plus'}
        size={20}
        color='#26a69a'
      />}

    />
  )

<View>
          <FlatList
            contentContainerStyle={{ flexGrow: 1 }}
            extraData={refreshing}
            keyExtractor={this.keyExtractor}
            data={itemsList}
            renderItem={this.renderItem}
          />
</View>

令我感到困惑的是，它在 expo 应用程序中运行良好，但在 expo android 构建中运行良好，我有什么解决办法或者是否有更好的选择？

我使用的是 expo 3.0.10，设备是运行 Android 9 Pie

Answer 1

我已经弄明白了，我将 Dimensions 与另一个视图一起使用并在其中放置了平面列表，这在定向后正确渲染了平面列表。

<View style={{ backgroundColor: '#f1f1f1', flex: 1 }}>
        <View style={{height:Dimensions.get('window').height - 80}}>
          <FlatList
            extraData={refreshing}
            keyExtractor={this.keyExtractor}
            data={itemsList}
            renderItem={this.renderItem}
          />
        </View>
</View>

android 构建 apk 方向更改时，为什么 Flatlist 无法正确呈现？

Why Flatlist isn't rendering properly when android build apk orientation changes?

react-native

expo

react-native-flatlist

react-native-elements