flexWrap 中元素的对齐方式取决于元素的数量答案

【问题标题】：Alignment of elements in flexWrap depends on number of elementsflexWrap 中元素的对齐方式取决于元素的数量
【发布时间】：2019-07-11 06:59:51
【问题描述】：

我正在尝试将一些文本垂直居中放置在 flexWrap 中的框中。但它略高于或低于中心，取决于有多少盒子（？？？）。随着更多方框的添加，观察所有 Hello 的上移：

世博小吃在这里：https://snack.expo.io/@danbock/vertically-center-text

无论有多少框，我怎样才能使此文本保持在中心？

【问题讨论】：

标签： react-native flexbox react-native-flexbox

【解决方案1】：

import * as React from 'react';
import {
 Text,
 View,
 StyleSheet,
 TouchableWithoutFeedback,
 ScrollView,
} from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
 render() {
   return (
     <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
     </View>
   );
 }
}
const styles = StyleSheet.create({
 surface: {
   alignItems: 'center',
   aspectRatio: 1,
   elevation: 2,
   justifyContent: 'center',
   margin: '5%',
   width: '40%',
   backgroundColor: '#eeeeee',
 },
 text: {
   textAlign: 'center',
   marginHorizontal: 'center',
   marginVertical: 'center',
 },
});

【讨论】：