根据文本长度动态查看

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 包裹 Text 并设置视图 StyleSheet 来实现你想要的效果。

例子：

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

风格：

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

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