FlatList中具有纵横比的中心项目 - React Native答案

【问题标题】：Center items with aspect ratio in FlatList - React NativeFlatList中具有纵横比的中心项目 - React Native
【发布时间】：2018-12-29 18:24:34
【问题描述】：

这个问题乍一看似乎很简单，但实际上很棘手。

最好直接进入示例。我在这里用示例代码创建了一个小吃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,
  }});

结果如下：

但是，问题是我想让项目与中心对齐。我试图将列表项包装在具有“行”方向的弹性框中，但这导致该项目的高度为 0 => 未显示。证明内容也没有帮助（我可能做错了）。

请问有人知道怎么解决吗？

【问题讨论】：

标签： css react-native

【解决方案1】：

更新了代码。将 flex 添加到内部项目并将视图包裹在另一个具有屏幕宽度的视图中。

import * as React from 'react';
import { Text, View, StyleSheet,FlatList,Dimensions } from 'react-native';
import { Constants } from 'expo';

const{width} = Dimensions.get('window')

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <FlatList style={{backgroundColor:'lightgray'}}
          data={[{key: 'a'},{key: 'b'}]}
          renderItem={({item}) => 
            <View style={styles.item}>
            <View style ={styles.pink}></View>
            </View>
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  item:{
   width:width,
   height:150,
   alignItems:'center'
  },
  pink: {
        flex:1,
        backgroundColor: "#A37E93",
        maxHeight:150,
        aspectRatio:3/2,
        borderWidth:1,
    }
});

【讨论】：