我正在尝试制作注册表。
我在组件目录下创建了一个名为 Regform.js 的文件。
我无法获得文本注册的边框底部
这是演示链接 demo working link
请让我知道,我哪里做错了
组件/Regform.js
import * as React from 'react';
import {
Text,
View,
StyleSheet,
TextInput,
TouchableOpacity
} from 'react-native';
export default class Regform extends React.Component {
render() {
return (
<View>
<Text style={styles.header}> Registration </Text>
<TextInput style = {styles.textinput}
underlineColorAndroid = "transparent"
placeholder = "Enter Your Name"
placeholderTextColor = "#9a73ef"
onChangeText = {this.handleName}/>
<TextInput style = {styles.textinput}
underlineColorAndroid = "transparent"
placeholder = "Enter Your Email"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleEmail}/>
</View>
);
}
}
const styles = StyleSheet.create({
header: {
fontSize: 36,
alignself: 'self',
color: 'red',
marginBottom: 30,
borderBottomColor: 'red',
borderBottomWidth: 2
},
textinput: {
fontSize: 18,
alignself: 'self',
color: 'black',
marginBottom: 30,
borderBottomColor: 'grey',
borderBottomWidth: 2
}
});
最佳答案
好像borderBottom
不适用于 Text 组件。您可以添加 View
包装和供应 borderBottom
给它或 添加 TextInput
并制作 editable={false}
<View style={styles.headerWrapper}>
<Text style={styles.header}> Registration </Text>
</View>
...
headerWrapper: {
borderBottomColor: 'red',
borderBottomWidth: 2,
marginBottom: 30,
},
header: {
fontSize: 36,
alignSelf: 'auto',
color: 'red',
},
关于react-native - 无法在 native react 中添加边框底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51962558/