如何在react-native Text中设计带有装饰线的文本

svmlkihl  于 2023-06-24  发布在  React
关注(0)|答案(4)|浏览(83)

我需要在文字和装饰线之间添加一些空间。有谁对此有什么建议吗?
我设置了文字装饰线,但它不显示文字和装饰线之间的空间。
喜欢下面的图片

此外,我还设置了boderBottom宽度。它显示在整个屏幕上

v8wbuo2f

v8wbuo2f1#

不幸的是,您不能单独使用Text来指定下划线边框和文本之间的间距。但是你可以用View Package 它。

<View style={{ alignSelf: 'flex-start', borderBottomColor: 'black', borderBottomWidth: 1 }}>
    <Text style={{ fontSize: 12, lineHeight: 30 }}>
      {'Lorem Ipsum dolor Siamet'}
    </Text>
</View>

只需更改线高以指定空间即可。下面是输出

mjqavswn

mjqavswn2#

也可以使用textDecorationLine

<Text style={{ fontSize: 18, textDecorationLine: 'underline' }}>28.Aug 2019</Text>

看零食:https://snack.expo.dev/@abrahamcalf/textdecorationline

u0sqgete

u0sqgete3#

添加视图并为视图给予边距,并为视图添加边框。

<View style={{borderWidth:1,bordercolor:"Black",marginBottom:2}}>
<Text style={{fontSize:12}>28.Aug 2019</Text>
</View>
n6lpvg4x

n6lpvg4x4#

这里有一个简单的解决方法来解决这个问题的文本边框去整个屏幕宽度。用flexDirection:"row"将其 Package 在View中。

<View style={{
        flexDirection:"row"
      }}>
        <Text
        style={{
          borderBottomWidth:1,
          paddingBottom:3

        }}
        >
        My Text
        </Text>

      </View>

https://snack.expo.io/@ammarahmed/grounded-watermelon
要让它在android和ios上工作,请使用以下方法。您需要使用TextInput才能使其工作。无论你想写什么,都要写在value中,并将editable设置为false

<View style={{
            flexDirection:"row"

          }}>
            <TextInput
            style={{
              borderBottomWidth:1,
              paddingBottom:3,
              borderBottomColor:"black",
            }}
            editable={false}
            value="My Text"
            />

          </View>

相关问题