代码之家 › 专栏 › 技术社区 › Rigorous implementation

在react native中包含文本的行,不使用库

react-native-ios jsx react-native-android react-native

Rigorous implementation · 技术社区 · 7 年前

试图复制以下设计,但无法复制。非常感谢您的帮助。

我从末尾开始尝试的代码如下,但该行覆盖了文本。

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

1 回复 | 直到 7 年前

Val 7 年前

让它这样工作:

<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>

推荐文章

Get Off My Lawn · 如何让eslint选择具有特定类的className的jsx元素?

6 月前

masoud khanlo · axios实例的React useState问题

7 月前

The Noobest Guy · React状态显示奇怪行为

11 月前

John · 如何在提交事件后清除文本框的值?

1 年前

Ahmed Bn · 从zustand商店获取空数组

1 年前

skyewasthelimit · 如何使用<Link>执行类似JS React中的“window.location=”/GameOverDied“;”的操作?

1 年前

JarochoEngineer · 跳过某些元素映射通过对象

1 年前

XMehdi01 · 在React组件中显示与箭头相对应的标题和内容

1 年前

yahya kamran · 对象作为React子对象无效(找到:具有键{type,props}的对象)。如果要渲染子对象的集合,请改用数组

1 年前

Satyam Mishra · 使用相同道具更新两个组件

1 年前