React Native Style 内容空间

Question

关于如何设置我的可触摸不透明按钮的样式以使其看起来像右图中的任何建议？

到目前为止，这是我的代码，我的结果是左边的图像..

我知道我需要应用 justify-content: space-between 但不知何故我无法弄清楚如何..

import {StyleSheet, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {Text} from 'react-native-elements';

const _positionTable = () => {
  return (
    <View style={styles.tabsContainer}>
      <TouchableOpacity style={styles.tab}>
        <Text style={styles.text}>MERCADO DE CAPITALES</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tab}>
        <Text style={styles.text}>FONDOS DE INVERSIÓN</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.tab}>
        <Text style={styles.text}>MERCADO DE DINERO</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  tabsContainer: {
    flexDirection: 'row',
    marginHorizontal: 20,
    marginTop: 20,
    maxWidth: '100%',
    alignContent: 'center',
    borderWidth: 1,
  },
  tab: {
    maxWidth: '30%',
    justifyContent: 'space-between',
    backgroundColor: 'orange',
  },
  text: {
    fontSize: 14,
    color: 'white',
    textAlign: 'center',
  },
});

export default _positionTable;

Answer 1

你可以使用flex:1或通过计算设置width，但我想flex会做得更好。