0

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

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

-> 在纵向模式下启动应用程序时，您可以一直滚动到底部，但是当您旋转设备时，我无法一直滚动到底部，或者似乎可以，但其余项目似乎是剪裁超出设备显示边框。

样品 1

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

样品 2

我尝试传递给 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

4

1 回答 1

0

我已经想通了，我将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>
于 2019-08-22T06:45:01.097 回答