Unxpected行は、App

Question

私はネイティブに反応使用してアプリケーションを構築していますネイティブ反応し、画像に下記のように私は私の物理的なAndroidデバイス上のすべてのTextInput以下の奇妙な予期しない行を取得します。また、iOSシミュレータでは線が表示されません。

入力コンポーネントのための私のコード：入力中底に

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

const Input = ({ value, onChangeText, placeholder, secureTextEntry }) => { 
    const { inputStyle, labelStyle, containerStyle } = styles; 

    return (
    <View style={containerStyle}> 
     <TextInput 
     secureTextEntry={secureTextEntry} 
     placeholder={placeholder} 
     autoCorrect={false} 
     style={inputStyle} 
     value={value} 
     onChangeText={onChangeText} 
     /> 
    </View> 
); 
}; 

const styles = { 
    inputStyle: { 
    color: '#000', 
    paddingRight: 5, 
    paddingLeft: 5, 
    fontSize: 14, 
    lineHeight: 23, 
    flex: 2, 
    }, 
    containerStyle: { 
    height: 40, 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'center', 
    borderBottomWidth: 1, 
    borderColor: '#ddd' 
    } 
}; 

export { Input }; 

Answer 1

は、境界線を削除するにはReact docsによると：

<TextInput underlineColorAndroid='transparent' /> 

のTextInputは、そのビューの下部にデフォルトで境界線を持っています。この境界線は、システムによって提供される背景画像によって設定されたパディングを有し、変更することはできません。これを避ける解決策は、高さを明示的に設定しないか、境界線を正しい位置に表示するか、underlineColorAndroidを透明に設定して境界を表示しないようにすることです。

自動修正タグを無効にすることもできます。それはあまりにも役立つかもしれない：

<TextInput autoCorrect={false} /> 

クレジット：

1. underlineColorAndroid
2. autoCorrect

Answer 2

ボーダーは、iOS用の国境底がない、アンドロイドのための自然な行動です。