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

Question

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

代码示例 -

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

Answer 1

您可以将 borderBottomWidth 和 borderBottomColor 添加到 TextInput，或者简单地绘制一个高度低于 TextInput 1 或 2 px 的视图。

Answer 2

在样式中试试这个..看看输出的区别

const styles = StyleSheet.create({

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

最后在textInput中添加样式

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

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

TextInput underline color for ios in react-native

underline

ios

react-native