FlatList中具有宽高比的中心项目-React Native

Question

开始时这似乎是一个简单的问题，但实际上很棘手。

最好直接转到示例。我在https://snack.expo.io/BkSNtNrWV

处创建了带有示例代码的小吃。

我想要一个具有给定长宽比（例如3：2）的项目的列表，并且这些项目应占用尽可能多的空间，并且最大尺寸限制。此示例代码可以做到：

<View>
    <FlatList style={{backgroundColor:'lightgray'}}
      data={[{key: 'a'},{key: 'b'}]}
      renderItem={({item}) => 
         <View style ={styles.pink}></View>
      }/>
</View>

const styles = StyleSheet.create({
    pink: {
         backgroundColor: "#A37E93",
         maxHeight: 150,
         aspectRatio: 3/2,
         borderWidth: 1,
  }});

这是结果：

但是，问题是我想使项目与中心对齐。我试图将列表项包装在具有“行”方向的flexbox中，但这导致该项目的高度为0 =>不显示。证明内容也无济于事（可能我做错了）。

有人知道如何解决这个问题吗？

Answer 1

更新了代码。将flex添加到内部项目中，然后将视图与屏幕宽度包装在一起。

<input type="button" onclick="surroundSelection()" value="Surround">
<div contenteditable="true" id="codeSection">One two three four</div>
<input type="button" onclick="getContentForSave();" value="Test For Save">