expo を使用してパントリー サービス アプリを構築しています。ノード パントリー サーバーからアイテムのリストを取得し、Flatlist を使用してアプリでレンダリングしています。
- 1 つのことを除いて、すべてが期待どおりに機能します。それは、向きが変更されたときのフラットリスト レンダリングです。
- expo アプリでテストすると、向きが変わっても問題なく動作します。
- 問題: Android apk をビルドしてデバイスのフラットリストでテストすると、期待どおりにレンダリングされなくなります。たとえば、次のようになります。
-> アプリを縦向きモードで起動すると、一番下までスクロールできますが、デバイスを回転させると、一番下までスクロールできないか、スクロールできるように見えますが、残りのアイテムはスクロールできないようですデバイスの表示境界を越えてクリップされます。
-> 逆に、横向きモードでアプリを起動すると、問題なく一番下までスクロールできますが、向きを縦向きに変更すると、フラットリストが画面の途中までしかレンダリングされず、まだスクロールできます。それの終わり。
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 を実行しています