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

Question

i am doing mobile applications in react-native for android and ios. In my project i am using TextInput Component(ios). This component appear without underline. How to use TextInput with underline color in ios.

code sample -

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

Answer 1

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

Answer 2

Try this in styles.. see the difference in output

const styles = StyleSheet.create({

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

Finally add the style in textInput

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