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

Question

我正在尝试在flexWrap的框中垂直居中放置一些文本。但这略高于或低于中心，具体取决于有多少个框（???）。观看随着添加更多框，所有的Hello都向上移动：

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

无论框数如何，如何使此文本停留在中间？

Answer 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',
 },
});