react-native – 无法在native native中添加border bottom

发布时间：2020-12-15 16:18:50 所属栏目：百科来源：网络整理

导读：我正在尝试登记表格. 我在组件目录下创建了一个名为Regform.js的文件. 我无法获得文本注册的边框底部这是演示链接demo working link 请告诉我,我做错了组件/ Regform.js import * as React from 'react'; import { Text,View,StyleSheet,TextInput,Touchab

我正在尝试登记表格.

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

我无法获得文本注册的边框底部

这是演示链接demo working link

请告诉我,我做错了

enter image description here

组件/ 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,color: 'black',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,},header: {
    fontSize: 36,alignSelf: 'auto',

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!