0

expo を使用してパントリー サービス アプリを構築しています。ノード パントリー サーバーからアイテムのリストを取得し、Flatlist を使用してアプリでレンダリングしています。

  • 1 つのことを除いて、すべてが期待どおりに機能します。それは、向きが変更されたときのフラットリスト レンダリングです。
  • expo アプリでテストすると、向きが変わっても問題なく動作します。
  • 問題: Android apk をビルドしてデバイスのフラットリストでテストすると、期待どおりにレンダリングされなくなります。たとえば、次のようになります。

-> アプリを縦向きモードで起動すると、一番下までスクロールできますが、デバイスを回転させると、一番下までスクロールできないか、スクロールできるように見えますが、残りのアイテムはスクロールできないようですデバイスの表示境界を越えてクリップされます。

サンプル1

-> 逆に、横向きモードでアプリを起動すると、問題なく一番下までスクロールできますが、向きを縦向きに変更すると、フラットリストが画面の途中までしかレンダリングされず、まだスクロールできます。それの終わり。

サンプル 2

flexgrow を contentContainerStyle に追加するだけでなく、extraData に渡そうとしました。また、View の代わりに ScrollView を使用してみましたが、顕著な改善はありません。

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