在不使用库的情况下与本机反应中的文本对齐

【问题标题】：Line with text in react native without using a library在不使用库的情况下与本机反应中的文本对齐
【发布时间】：2018-05-31 11:06:35
【问题描述】：

尝试复制以下设计但无法复制。将不胜感激任何帮助。

我最后尝试的代码如下，但该行覆盖了文本。

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

【问题讨论】：

标签： react-native react-native-android jsx react-native-ios

【解决方案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>

【讨论】：