React Native - 文本輸入的底部邊框

Question

我正在嘗試創建一個沒有邊框的文本輸入。 我給了仍然和屬性然后這發生了。

文字輸入圖片

有一條黑色的底部邊界線。 我怎樣才能刪除這個邊框？

import { TextInput } from 'react-native-paper'

這些是樣式代碼

width: width * 0.6,
height: height * 0.075,
paddingLeft: 15,
fontSize: 12,
borderRadius: 25,

和文本輸入

<TextInput
    style={styles.emptyPostPageTitleInput}
    placeholder="title"
    placeholderTextColor="grey"
    maxLength={17}/>

Answer 1

文檔指出“TextInput 默認情況下在其視圖底部有一個邊框。該邊框的填充由系統提供的背景圖像設置，並且無法更改。”

盡管如此，如果您將borderBottomWidth: 0添加到您的styles，那應該“刪除”它。

對於react-native-paper ，解決方案是在組件中添加以下內容：

underlineColor="transparent"

應該是這樣的：

<TextInput
    style={styles.emptyPostPageTitleInput}
    placeholder="title"
    placeholderTextColor="grey"
    maxLength={17}
    underlineColor="transparent"/>

Answer 2

您可以通過添加簡單的 styles使您的邊框不可見，並且不需要安裝像(react-native-paper)這樣的第三方庫。

 import {TextInput} from "react-native"; <TextInput style={styles.dummy} placeholder="Email Address or UserName" />

styles 是

 const styles = StyleSheet.create({ dummy: { marginTop: 30, padding: 13, alignContent: "center", justifyContent: 'center', alignItems: 'center', borderWidth:0, (// width: '85%', // height: 50, // borderColor: "#808080", // borderRadius: 10, // marginHorizontal: 22, // borderBottomWidth:0, // ) } //You can use if you wanted. Not necessary.

output 將如下圖所示，