1. ホーム
  2. javascript

[解決済み] 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" から取得しました。