在 React Native 中 Android 上的 borderWidth

Question

我不明白为什么在 Android 上，当 Text 元素的 borderWidth 属性 大于 1 时，文本位于边框上（而不是内部）。

enter image description here

const BoxScreen = () => {
  return (
    <View style={styles.viewStyle}>
      <Text style={styles.textStyle}>Child #1</Text>
      <Text style={styles.textStyle}>Child #2</Text>
      <Text style={styles.textStyle}>Child #3</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  viewStyle: {
    borderWidth: 3,
    borderColor: 'black',
    alignItems: 'flex-end'
  },
  textStyle: {
    borderWidth: 50,
    borderColor: 'red'
  }
});

Answer 1

如果你想为每个 child 设置边框，你必须让它们有自己的视图

const BoxScreen = () => {
  return (
    <View style={styles.viewStyle}>
      <View style={styles.viewChild}>
        <Text style={styles.textStyle}>Child #1</Text>
      </View>
      <Text style={styles.textStyle}>Child #2</Text>
      <Text style={styles.textStyle}>Child #3</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  viewChild: {
    borderWidth: 3,
    borderColor: 'red',
  },
  textStyle: {

  }
});