在 React Native 应用程序中的文本前后行

Question

如何在 React Native 应用程序中像截图一样设置文本样式？这就像文本前面的行和文本后面的行。我有一些想法可以用 ：before 和 ：after 伪元素进行样式设计，但这些元素在 React Native 中不存在。

截图

一些想法？

Answer 1

若要设置文本样式，使其周围显示水平线，可以将文本置于如下所示的视图中：

<View>
      <View style={{alignSelf:'center',position:'absolute',borderBottomColor:'black',borderBottomWidth:1,height:'50%',width:'90%'}}/>
      <Text style={{alignSelf:'center',paddingHorizontal:5}}>Your text here</Text>
</View>

Answer 2

试试这个，这对我有用，继续编码

<View
  style={{
    flexDirection: "row",
    width: "85%",
    alignSelf: "center",
  }}
>
  <View
    style={{
      backgroundColor: Colors.borderColor,
      height: 1,
      flex: 1,
      alignSelf: "center",
    }}
  />
  <Text
    style={{
      alignSelf: "center",
      paddingHorizontal: 5,
      fontSize: 14,
    }}
  >
    Or
  </Text>
  <View
    style={{
      backgroundColor: Colors.borderColor,
      height: 1,
      flex: 1,
      alignSelf: "center",
    }}
  />
</View>;