如何设置两个按钮粘在一起？

Question

我设置了两个半椭圆形按钮，然后尝试将其位置设置在中心。

但是我发现它们没有粘在一起，我尝试更改justifyContent: 'space-between'或'space-around'不起作用。

如何让“向左”按钮和“向右”按钮粘在一起？

这是我的代码：

return (
  <View style={{ justifyContent: 'center', marginTop: 50, flexDirection: 'row', backgroundColor: 'blue' }}>
    <TouchableOpacity style={[styles.buttonStyle, { width: 150, height: 50, borderBottomLeftRadius: 50, borderBottomRightRadius: 0, borderTopLeftRadius: 50, borderTopRightRadius: 0 }]}>
      <Text>Left</Text>
    </TouchableOpacity>
    <TouchableOpacity style={[styles.buttonStyle, { backgroundColor: 'orange', width: 150, height: 50, borderBottomLeftRadius: 0, borderBottomRightRadius: 50, borderTopLeftRadius: 0, borderTopRightRadius: 50 }]}>
      <Text>Right</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
buttonStyle: {
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
    borderWidth: 1,
    borderColor: 'transparent',
    marginLeft: 5,
    marginRight: 5
  },
});

Answer 1

删除边距

buttonStyle: {
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
    borderWidth: 1,
    borderColor: 'transparent',
    marginLeft: 5,//this
    marginRight: 5// this
  },