边框超出轮廓

Question

我有一个简单的文本框，我已经给出了一个大纲。但是，如果您仔细观察，您会发现边框和边框轮廓不匹配。 View 的白色也延伸到边框轮廓之外。我该如何解决这个问题？

export const AddressTextBox: React.FunctionComponent<AddressTextBoxProps> = ({
  placeName,
}) => {
  return (
    <View style={styles.textBox}>
      <Text style={styles.text}>{placeName}</Text>
    </View>
  );
};

export const styles = StyleSheet.create({
  textBox: {
    backgroundColor: 'white',
    height: moderateScale(50),
    width: '70%',
    marginTop: moderateScale(40),
    alignSelf: 'center',
    borderRadius: moderateScale(20),
    borderColor: '#383838',
    borderWidth: 0.3,
    alignItems: 'center',
    flexDirection: 'row',
  },
  text: {
    fontSize: moderateScale(13),
    flex: 1,
    marginHorizontal: 10,
    textAlign: 'center',
  },
});

编辑：

iOS模拟器中不存在该问题，但Android手机中确实存在。

Answer 1

我尝试使用这个并且不使用中等比例，它工作正常

<View style={{ flex: 1, backgroundColor: 'pink' }}>
        <View
          style={{
            backgroundColor: 'white',
            height: 50,
            width: '70%',
            marginTop: 40,
            alignSelf: 'center',
            borderRadius: 20,
            borderBottomColor: 'red',
            borderTopColor: 'red',
            borderRightColor: 'red',
            borderLeftColor: 'red',
            borderWidth: 0.3,
            alignItems: 'center',
            flexDirection: 'row'
          }}>
          <Text
            style={{
              fontSize: 13,
              flex: 1,
              marginHorizontal: 10,
              textAlign: 'center'
            }}>
            {'vergaminol'}
          </Text>
        </View>
      </View>