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

Question

我正在为android和ios做反应原生的移动应用程序。 在我的项目中，我正在使用TextInput Component（ios）。此组件显示没有下划线。如何在ios中使用带下划线颜色的TextInput。

代码示例 -

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

Answer 1

您可以将borderBottomWidth和borderBottomColor添加到TextInput，或者只是在TextInput下绘制一个高度为1或2像素的视图。

Answer 2

尝试样式。.看到输出的差异

const styles = StyleSheet.create({

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

最后在textInput中添加样式

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