带有文本的行在不使用库的情况下进行原生反应

Question

试图复制以下设计但不能.将不胜感激任何帮助.

我尝试过的代码如下所示,但该行会覆盖文本.

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

Answer 1

它以这种方式工作:

<View style={{flexDirection: 'row'}}>
    <View style={{backgroundColor: 'black', height: 2, flex: 1, alignSelf: 'center'}} />
    <Text style={{ alignSelf:'center', paddingHorizontal:5, fontSize: 24 }}>Your class</Text>
    <View style={{backgroundColor: 'black', height: 2, flex: 1, alignSelf: 'center'}} />
</View>