[解決済み] React NativeのTextInputの中にアイコンを入れるには?
2023-04-26 05:23:16
質問
次のようなものを用意しようと考えています。 https://android-arsenal.com/details/1/3941 ここで、パスワードをドットではなく平文で表示するために押すアイコンがあります。しかし、私は私を助けるだろう任意のカスタムコンポーネントを見つけることができませんでした。
このようなマイナーな機能にあまり時間をかけたくないので、まだ何も試していない状態で質問しています。私が見逃しているカスタム コンポーネントがありますか。もしそうでなければ、TextInput に子を追加する簡単な方法はありますか?それとも、TextInputとTouchableを並べるべきでしょうか?
どのように解決するのですか?
View、Icon、TextInputを組み合わせて使用することができます。
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
<TextInput
style={styles.input}
placeholder="User Nickname"
onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
</View>
とし、スタイリングにフレックスディレクションを使用する
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
},
アイコンは "react-native-vector-icons" から取得しました。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] React JSX内のループ
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] これは純関数ですか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ