React Native (iOS) 中只在 <Text/> 组件的一侧添加边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36444874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding border only to the one side of the <Text/> component in React Native (iOS)
提问by Nirav Dangi
I am facing something weird issue with React-Native's <Text/>component in iOS.
我<Text/>在iOS 中遇到了 React-Native组件的一些奇怪问题。
I wanted to apply borderBottomWidthstyle into <Text/>component but it did NOT work. However, the borderWidthoption worked.
我想将borderBottomWidth样式应用到<Text/>组件中，但它不起作用。但是，该borderWidth选项有效。
Worked
<Text style={{borderWidth:1}}> React Native </Text>NOT Worked
<Text style={{borderBottomWidth:1}}> React Native </Text>
工作过
<Text style={{borderWidth:1}}> React Native </Text>没有工作
<Text style={{borderBottomWidth:1}}> React Native </Text>
Is there any way to only apply bottom level border into the <Text/>component?
有没有办法只将底层边框应用到<Text/>组件中？
Thank you!
谢谢！
Note:
笔记：
I am aware of following mentioned approaches in order to achieve this but in my case, I required to apply the style only to the <Text/>component.
我知道以下提到的方法可以实现这一点，但在我的情况下，我只需要将样式应用于<Text/>组件。
- We can try wrapping
<View/>to the<Text/>and applyborderBottomWidthstyle to the<View/>. (borderBottomWidthworks fine with<View/>) - Adding such
<View/>just below to the<Text/>component which can look like a line.
- 我们可以尝试包装
<View/>到<Text/>并将borderBottomWidth样式应用于<View/>。（borderBottomWidth工作正常<View/>） - 将此类添加
<View/>到<Text/>看起来像一条线的组件的下方。
采纳答案by Dave Sibiski
This isn't currently possible. See the following RN issue: https://github.com/facebook/react-native/issues/29and this ticket on Product Pains: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/
这目前是不可能的。请参阅以下 RN 问题：https: //github.com/facebook/react-native/issues/29以及关于 Product Pains 的这张票：https: //productpains.com/post/react-native/add-borderwidth-left-右上-下至文本输入-/
回答by Chaim Paneth
Even though borderBottom doesn't work on the Text component, it did work for me on the TextInput component, just set editable to false and set the value to your desired text as so...
尽管 borderBottom 在 Text 组件上不起作用，但它在 TextInput 组件上确实对我有用，只需将 editable 设置为 false 并将值设置为您想要的文本...
<TextInput
style={styles.textInput}
editable={false}
value={'My Text'}/>
const styles = StyleSheet.create({
textInput: {
borderBottomColor: 'black',
borderBottomWidth: 1,
}
});
回答by MohammadAli Karimi
<Text style={{
borderBottomWidth: 1,
borderBottomColor: 'red',
borderBottomStyle: 'solid'
}}>
React Native
</Text>
or
或者
borderBottom: '1px solid rgba(219, 219, 219, 1)'
