如何在 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屋！