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

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

标签： react-native

Answer 1

删除边距，

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