React Native Style 内容 space-between

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会更好。

React Native Style 内容 space-between

React Native Style conent space-between

css

styles

flexbox

reactjs

react-native