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