动态视图根据文本的长度

Question

我正在开发一个带有本机反应的应用程序，我有图形问题。我需要在我的文本中有一个动态黄色条（在视图中），如下所示：

所以，这意味着如果我有一个更长的文本，条形应该更长，如果文本更短，条形也应该更短，适合它。到现在为止我使用静态方法。我把90的宽度给了酒吧，这是不好的。这是代码：

<View style={[styles.rowSep, {width:90}]}/>
<Text style={[commonStyle.normalItem , {marginBottom:10}]}>
    {I18n.t("Il_Museum_Modena")}
</Text>

这是风格：

rowSep: {
    height: 7,
    marginVertical: 4,
    //width: Dimensions.get('window').width,
    backgroundColor: '#FABB00',
    marginBottom:12,
         },

你能帮我根据文字的长度设置动态黄条。提前致谢。

Answer 1

您可以使用视图包装文本并设置视图样式表以获得您想要的效果。

示例：

<View style={styles.textwrapper}>
  <Text>Just test</Text>
</View>

风格：

textwrapper: {
  borderBottomWidth: 5px,
  borderBottomColor: #234532,
  borderStyle: 'solid'
}

我没有测试过这段代码，但我希望这会给你一些提示。