Как я могу поместить значок внутри TextInput в React Native?

Question

Я думаю, что у вас есть что-то вроде этого https://android-arsenal.com/details/1/3941, где у вас есть значок, который вы нажимаете для отображения пароля как открытого текста, а не как точки. Однако мне не удалось найти какой-либо пользовательский компонент, который бы мне помог.

Я не хочу тратить слишком много времени на такую ​​второстепенную функцию, поэтому я спрашиваю, не предприняв ничего еще: есть ли какой-то пользовательский компонент, который я пропустил? Если нет, есть ли простой способ добавить детей в TextInput? Или мне просто нужно иметь TextInput и Touchable бок о бок?

Answer 1

Вы можете использовать этот модуль, который прост в использовании: https://github.com/halilb/react-native-textinput-effects

Answer 2

Вот вам пример, который я взял из моего проекта, я только что удалил то, что я думал, что мы не нужно для примера.

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

Вы можете обернуть свой TextInput в представлении.

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

и динамически рассчитать ширину, если вы хотите добавить значок, iconWidth = 0,05 * viewWidth, textInputWidth = 0,95 * viewWidth, в противном случае textInputwWidth = viewWidth. View и TextInput BackgroundColor являются белыми. Маленький хак)

Answer 4

Вы можете использовать комбинацию 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> 

и использовать Flex-направление для укладки

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', 
}, 

Иконы были взяты из «реагировать-native- vector-icons "

Answer 5

В принципе вы не можете поместить значок внутри текстового ввода, но вы можете подделать его, обернув его внутри представления и установив некоторые простые правила стилизации.

Вот как это работает:

• поставил как Icon и TextInput внутри родительского вида
• набор flexDirection родителя в 'строке' который будет выравнивать дети рядом друг с другом
• TextInput сгибать 1 поэтому она занимает всю ширину родительского View
• дают родительского видаborderBottomWidth и нажать эту границу вниз с paddingBottom (это будет делать вид, как обычный TextInput с borderBottom)
  • (или вы можете добавить любой другой стиль в зависимости от того, как вы хотите его посмотреть)

Код:

<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 он появится на левый.)