react-native - 无法在本机反应中添加边框底部
问题描述
我正在尝试制作注册表单。
我在组件目录下创建了一个名为 Regform.js 的文件。
我无法获得文本注册的边框底部
这是演示链接演示工作链接
请让我知道,我在哪里做错了
组件/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',
},
推荐阅读
- html - How do I put an image next to a text in CSS?
- python - Appliyng data augmentation to all but one class in python
- java - 将字符串转换为日期 Java
- javascript - Locking the body scroll, blocks target element scrolling
- arrays - Pointer function only returns the first element in Float Array in C
- ios - Flutter Image Picker with iOS Method Channel
- python - 如何使用 Python 从 HDF5 文件中的组中加载我的 Keras 模型
- assembly - ARM 程序集,在将换行符(ASCII 10)更改为空终止并重新打印后打印出多余的字符(字母 A)
- java - 使用 ClassGraph 获取目录下的所有 jar 文件
- java - 排序列表末尾有空值和空值