Flexbox在本机中使两个元素在行的相对两端浮动

Question

我一生似乎无法弄清楚如何更正此React Native应用程序上的布局

当前，我有两行，每行都有一个带有图标和标题的标题行，然后是一个带有数字和按钮的子行。

两个标题行都很好，但是在子行上，数字和按钮在最左侧被挤压在一起，而我试图这样做，以使数字向左浮动，按钮向右浮动，关于它们的填充当然。

我在这里到底在做什么错？

import React, { Component } from 'react';
import { StyleSheet, Text,  View, Dimensions, Button } from 'react-native';
import Icon from '@expo/vector-icons/Ionicons';
import MatIcon from '@expo/vector-icons/MaterialCommunityIcons';


export default class Dashboard extends Component{
  render() {
    return(
      <View style={styles.container}>

        <View style={styles.widgetContainer}>
            <MatIcon  name="cup-water" size={50} />
            <Text>Water</Text>
        </View>
        <View style={styles.widgetContainer}>
            <Text>
            2
            </Text>
            <Button title="Record" />
        </View>

        <View style={styles.widgetContainer}>
            <MatIcon  name="scale-bathroom" size={50} />
            <Text>Weight</Text>
        </View>
        <View style={styles.widgetContainer}>
            <Text>
            2
            </Text>
            <Button title="Record" />
        </View>
    </View>
    ) ;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',

  },
  widgetContainer: {
    flex: 1,
    padding:10,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start' // if you want to fill rows left to right
  },
  widget: {
    width:'100%',
    padding: 10,
  }
});

输出