[React Native中的Android上的orderWidth

Question

我不明白为什么当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

如果您希望每个孩子都有边框，则必须让他们拥有自己的视图

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: {

  }
});