Reactjs 邮件底部平面列表

我需要从下到上定位消息，但FlatList不支持定位

<FlatList
 ListEmptyComponent={<ActivityIndicator style={{marginTop: 20}} size="large" color="gray" />}
 data={DATA}
 renderItem={({ item, index }) => (
   <Message
     key={index}
     text={item.title}
     uri={item.uri}
     name={item.name}
     time={item.time}
     sticker={item.sticker}
     anim={item.anim}
     audio={item.audio}
     link={item.link}
   />
 )}
 keyExtractor={item => item.id}
/>

---

可以将平面列表包装在视图中，并移动底部，如下所示。我为样式设置了一个条件，以确保活动指示器显示在中间

  <View style={DATA.length ? { marginTop: 'auto' } : null}>
      <FlatList
        ListEmptyComponent={
          <ActivityIndicator
            style={{ marginTop: 20 }}
            size="large"
            color="gray"
          />
        }
        data={DATA}
        renderItem={({ item, index }) => (
          <Message
            key={index}
            text={item.title}
            uri={item.uri}
            name={item.name}
            time={item.time}
            sticker={item.sticker}
            anim={item.anim}
            audio={item.audio}
            link={item.link}
          />
        )}
        keyExtractor={(item) => item.id}
      />
    </View>

---

可以使用平面列表上的CSS来完成

style={{flex:1, position: 'absolute', bottom: 0, width:"100%" }}

编辑

 style={{width:"100%", height: "100%", justifyContent:"flex-end"}}