gpt4 book ai didi

react-native - 默认下划线在 React Native 的 TextInput 中不可见

转载 作者:行者123 更新时间:2023-12-04 05:25:52 26 4
gpt4 key购买 nike

我是 React 原生开发的新手。在我的应用程序中,我有登录页面,在此登录页面中有两个文本输入。在此文本输入中没有下划线。我尝试了很多方法,但没有下划线。这里我的要求是需要输入文本的下划线。那么如何得到这个下划线呢?

这是我的登录表单代码。

import React, {Component} from 'react';
import {StyleSheet, Text, View,TextInput,TouchableOpacity} from 'react-native';

export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>SEDC</Text>
<TextInput placeholder="Acct No/User Id" style={styles.textInput} multiline={true}></TextInput>
<TextInput placeholder="Password" style={styles.textInput}></TextInput>
<TouchableOpacity style={styles.btn} onPress={this.login}><Text>Log In</Text></TouchableOpacity>
</View>
);
}

login=()=>{
alert("testing......");
// this.props.navigation.navigate('Second');
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},

textInput: {
alignSelf: 'stretch',
padding: 10,
marginLeft: 50,
borderBottomColor:'#000',
margin:5,
marginRight:50,
// backgroundColor: '#000',
},
btn:{
alignSelf: 'stretch',
backgroundColor: '#01c853',
padding: 10,
margin:10,
marginLeft: 100,
marginRight:100,
alignItems: 'center',
}
});

这是我的代码的输出。

enter image description here

我已经尝试过使用 borderBottomColor:'#000',但没有用..所以请指导我如何做到这一点

提前致谢...

最佳答案

除了设置底部边框颜色,您还需要设置底部边框“宽度”。
borderBottomWidth属性定义了边框的粗细,以像素为单位,沿着 textInput 组件的底部边缘。例如,您可以在 textInput 的底部应用黑色边框。 ,通过对您的样式进行以下调整,厚度为 2 个像素:

textInput: {
alignSelf: 'stretch',
padding: 10,
marginLeft: 50,
borderBottomColor:'#000',
margin:5,
marginRight:50,

borderBottomColor: '#000', // Add this to specify bottom border color
borderBottomWidth: 2 // Add this to specify bottom border thickness
}

关于react-native - 默认下划线在 React Native 的 TextInput 中不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52531297/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com