React NativeのTextInput内にアイコンを配置するにはどうすればよいですか？

Question

私はこのようなことを考えていますhttps://android-arsenal.com/details/1/3941アイコンを押してパスワードをプレーンテキストで表示するか、ドットで表示しないでください。しかし、私は私を助けるカスタムコンポーネントを見つけることができませんでした。

このようなマイナーな機能に時間を掛けたくないので、まだ何も試さずに尋ねています。カスタムコンポーネントがありますか？そうでない場合、TextInputに子を追加する簡単な方法はありますか？それとも、TextInputとTouchableを並べて使用するだけですか？

Answer 1

あなたが使いやすい、このモジュールを使用することができます：あなたは私は自分のプロジェクトから取った例を持ってhttps://github.com/halilb/react-native-textinput-effects

Answer 2

ここでは、私はちょうど私たちは、たとえば必要didntは思っ削除しました。

import React, { Component } from 'react'; 
import { 
    Text, 
    TouchableOpacity, 
    View, 
    StyleSheet, 
    Dimensions, 
    Image 
} from 'react-native'; 

class YourComponent extends Component { 
    constructor(props) { 
    super(props); 

    this._makeYourEffectHere = this._makeYourEffectHere.bind(this); 

    this.state = { 
     showPassword: false, 
     image: '../statics/showingPassImage.png' 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}> 
      <Text>button</Text> 
      <Image style={styles.image} source={require(this.state.image)}></Image> 
     </TouchableOpacity> 
     <TextInput password={this.state.showPassword} style={styles.input} value="abc" /> 
     </View> 
    ); 
    } 

    _makeYourEffectHere() { 
    var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png'; 
    this.setState({showPassword: !this.state.showPassword, image: png}); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'white', 
    justifyContent: 'center', 
    flexDirection: 'column', 
    alignItems: 'center', 
    }, 
    button: { 
    width: Dimensions.get('window').width * 0.94, 
    height: 40, 
    backgroundColor: '#3b5998', 
    marginTop: Dimensions.get('window').width * 0.03, 
    justifyContent: 'center', 
    borderRadius: Dimensions.get('window').width * 0.012 
    }, 
    image: { 
    width: 25, 
    height: 25, 
    position: 'absolute', 
    left: 7, 
    bottom: 7 
    }, 
    input: { 
    width: Dimensions.get('window').width * 0.94, 
    height: 30 
    } 
}); 

module.exports = YourComponent; 

私はあなたを助けてくれることを願っています。

有用かどうか教えてください。

Answer 3

ViewでTextInputを折り返すことができます。

<View><TextInput/><Icon/><View>

と動的幅を計算、アイコン、iconWidth = 0.05を追加したい場合は* viewWidth、textInputWidth = 0.95 * viewWidth、そうでない場合はtextInputwWidth = viewWidth。 ViewとTextInput BackgroundColorは白です。小ハック）

Answer 4

あなたがそうのように表示、アイコンとの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', 
}, 

をスタイリングのためのフレックス方向を使用しますベクトルアイコン "

Answer 5

基本的には、textInputの内部にアイコンを置くことはできませんが、ビュー内にラップして単純なスタイリングルールを設定することで偽装できます。ここで

は、それがどのように動作するかです：

• が親ビュー内のTextInputアイコンとの両方を置く
• 整列する'行'に親のflexDirectionを設定 隣同士の子供
• のTextInputフレックス1ので、それは（これは、それがborderBottomとの定期的にtextInputのように見えるようになります）、親ビュー
• の全幅が親ビューにborderBottomWidthを与え、paddingBottomので、この境界線を押し下げ取ります
  • （またはあなたがそれを見てみたいかに応じて、他のスタイルを追加することができます）

コード：

<View style={styles.passwordContainer}> 
    <TextInput 
    style={styles.inputStyle} 
     autoCorrect={false} 
     secureTextEntry 
     placeholder="Password" 
     value={this.state.password} 
     onChangeText={this.onPasswordEntry} 
    /> 
    <Icon 
    name='what_ever_icon_you_want' 
    color='#000' 
    size={14} 
    /> 
</View> 

スタイル：

passwordContainer: { 
    flexDirection: 'row', 
    borderBottomWidth: 1, 
    borderColor: '#000', 
    paddingBottom: 10, 
}, 
inputStyle: { 
    flex: 1, 
}, 

（注：アイコンでは、TextInputの下にある、それは右端に表示されるように、それはTextInputコントロールを超えていた場合、それが表示されます左）。