如何在React Native中将图标放入TextInput中? [英] How can I put an icon inside a TextInput in React Native?

问题描述

我正在考虑使用类似 https://android-arsenal.com/details/1/3941 中，您具有按下的图标，用于将密码显示为纯文本而不是点.但是，我找不到任何可以帮助我的自定义组件.

I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any custom component that would help me.

我不想在这样的次要功能上花太多时间，所以我在问之前还没有尝试过什么:我错过了一个自定义组件吗?如果没有，是否有一种简单的方法可以将子级添加到TextInput?还是应该让TextInput和Touchable并排?

I don't want to put too much time on such a minor feature, so I'm asking without having attempted anything yet: Is there a custom component I've missed? If not, is there a simple way to add children to TextInput? Or should I just have TextInput and Touchable side by side?

推荐答案

您可以像这样使用View，Icon和TextInput的组合:

You can use combination of View, Icon and TextInput like so:

<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-direction进行样式设计

and use flex-direction for styling

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"

Icons were taken from "react-native-vector-icons"

这篇关于如何在React Native中将图标放入TextInput中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！