react-native中ios的TextInput下划线颜色

Posted 2023-02-23

【中文标题】react-native中ios的TextInput下划线颜色

【英文标题】：TextInput underline color for ios in react-native

【发布时间】：2017-12-18 03:33:01

【问题描述】：

我正在为 android 和 ios 做 react-native 的移动应用程序。 在我的项目中，我使用的是 TextInput Component(ios)。该组件不带下划线。如何在 ios 中使用带有下划线颜色的 TextInput。

代码示例 -

<TextInput
 ref='cardbatch1'                 
 keyboardType = 'numeric'
 placeholder = 'Batch Number'
 autoCapitalize = 'none'                                                    
/>

【问题讨论】：

请提供最小的工作示例。

【参考方案1】：

在样式中试试这个..看看输出的差异

const styles = StyleSheet.create(

    inputBox: 
        .....
        borderBottomWidth: 1,
        borderBottomColor: 'gray',
        ....
    
);

最后在textInput中添加样式

<TextInput
 ...             
 keyboardType = 'numeric'
 placeholder = 'Batch Number'
 autoCapitalize = 'none'
 style=styles.inputBox
.....                                                    
/>

【参考方案2】：

您可以将borderBottomWidth 和borderBottomColor 添加到TextInput 或简单地在TextInput 下方绘制一个高度为1 或2 px 的视图。

【讨论】：

谢谢..我会选择borderBottomWidth和borderBottomColor。

这在 android 中不起作用。如何在android中制作

安卓使用：underlineColorAndroid="transparent"