web-dev-qa-db-ja.com

反応ネイティブのiOSのTextInput下線の色

Androidとiosの反応ネイティブでモバイルアプリケーションを実行しています。私のプロジェクトでは、TextInput Component（ios）を使用しています。このコンポーネントは下線なしで表示されます。iOSで下線色付きのTextInputを使用する方法。

コードサンプル-

<TextInput
 ref={'cardbatch1'}                 
 keyboardType = 'numeric'
 placeholder = 'Batch Number'
 autoCapitalize = 'none'                                                    
/>
iosreact-nativeunderline
10
Sathish Sundharam

BorderBottomWidthとborderBottomColorをTextInputに追加するか、TextInputの下に高さ1または2ピクセルのビューを単純に描画できます。

26
Irfan Ayaz

スタイルでこれを試してください。出力の違いを確認してください

const styles = StyleSheet.create({

    inputBox: {
        .....
        borderBottomWidth: 1,
        borderBottomColor: 'gray',
        ....
    }
});

最後に、textInputにスタイルを追加します

<TextInput
 ...             
 keyboardType = 'numeric'
 placeholder = 'Batch Number'
 autoCapitalize = 'none'
 style={styles.inputBox}
.....                                                    
/>
4
Rezaul Karim