嵌套在View中的文本，如何使视图成为内容的大小？

Question

例如，我有以下代码：

<View style={styles.container}>
  <Text>
    Hello, World!
  </Text>
</View>

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: 1
  }
});

此代码实际上使我的文字加下划线。但是我有一些与此相关的问题。因为我使用borderBottomWidth使我的文字加下划线，所以View的宽度（设备宽度的100％）都加下划线。

问题是如何使我的视图遵循文本的上下文。什么意思只是自动加下划线为Text上下文的宽度，而不是使用View的width属性？或者在我的情况下是否可能？

Answer 1

您应该为Text组件提供下划线样式，而不是View。像这样：

  <View style={styles.container}>
    <View style={{flexDirection: 'row'}}>
      <Text style={styles.textStyle}>
        Hello, World!
      </Text>
    </View>
  </View>

const styles = StyleSheet.create({
  container: {
    //what ever you want for view
  },
  textStyle: {
    borderBottomWidth: 1,
    paddingBottom: 20,
  }
});