React Native中无法添加底部边框。

Question

React Native中无法添加底部边框。

react-native

46

我正在尝试制作一个注册表单。

我在组件目录下创建了一个名为Regform.js的文件。

我无法为文本“Registration”获取border-bottom样式。

这是演示链接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
      }
  });

- Chaitanya K

边框出现在您的屏幕上。 - Foyarash

2个回答

2

更准确的答案是只有IOS不支持。请参考此讨论，可能会得到解决：https://github.com/facebook/react-native/issues/23537

- Kirill Novikov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pritish Vaidya · Accepted Answer

看起来 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',

},