如何在React Native中的TextInput中放置一个图标？

Question

我想有这样的东西https://android-arsenal.com/details/1/3941你有按下的图标显示密码为明文,而不是点.但是,我无法找到任何可以帮助我的自定义组件.

我不想在这样一个小功能上花太多时间,所以我在没有尝试任何事情的情况下问:是否有我错过的自定义组件？如果没有,是否有一种简单的方法可以将子项添加到TextInput？或者我应该只是将TextInput和Touchable并排？

Answer 1

您可以使用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-direction进行样式设计

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"

Answer 2

基本上你不能在textInput中放置一个图标,但你可以通过将它包装在视图中并设置一些简单的样式规则来伪造它.

以下是它的工作原理:

• 将Icon和TextInput放在父视图中
• 将父项的flexDirection设置为"row",这将使子项彼此相邻
• 给TextInput flex 1,使其占用父视图的整个宽度
• 给家长看一个borderBottomWidth,推动这一边界下来paddingBottom来(这将使它看起来像一个borderBottom定期为textInput)
  • (或者您可以添加任何其他样式,具体取决于您希望它的外观)

码:

<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上方,则会显示在左侧.)

Answer 3

这在 ReactNative 0.60.4 中对我有用

看法

<View style={styles.SectionStyle}>
    <Image
        source={require('../assets/images/ico-email.png')} //Change your icon image here
        style={styles.ImageStyle}
    />

    <TextInput
        style={{ flex: 1 }}
        placeholder="Enter Your Name Here"
        underlineColorAndroid="transparent"
    />
</View>

样式

SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: 0.5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5,
    margin: 10,
},
ImageStyle: {
    padding: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode: 'stretch',
    alignItems: 'center',
}

Answer 4

如果有用，我会分享我找到的一个干净的解决方案：

<View style={styles.inputContainer}>
  <TextInput
    style={styles.input}
    onChangeText={(text) => onChange(text)}
    value={value}
  />
  <Icon style={styles.icon} name="your-icon" size={20} />
</View>

然后在你的 css 中

 inputContainer: {
    justifyContent: 'center',
  },
  input: {
    height: 50,
  },
  icon: {
    position: 'absolute',
    right: 10,
  }

Answer 5

 import { TextInput } from 'react-native-paper';

 <TextInput
      label="Password"
      secureTextEntry
      right={<TextInput.Icon name="eye" />}
    />