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

Posted 2023-02-22

【中文标题】如何在 React Native 的 TextInput 中放置一个图标？

【英文标题】：How can I put an icon inside a TextInput in React Native?

【发布时间】：2017-04-17 13:14:11

【问题描述】：

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

我不想在这样一个小功能上花费太多时间，所以我没有尝试任何东西就问：是否有我错过的自定义组件？如果没有，是否有一种简单的方法可以将子项添加到 TextInput？还是应该让 TextInput 和 Touchable 并排？

【参考方案1】：

您可以使用这个简单易用的模块：https://github.com/halilb/react-native-textinput-effects

【讨论】：

看起来确实不错，但在示例和自述文件中，似乎没有迹象表明图标能够对被按下做出反应。

如果你 fork 项目，你可以用 '' 包裹图标

【参考方案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;

希望对你有帮助。

如果有用请告诉我。

【参考方案3】：

您可以将TextInput 包裹在View 中。

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

并动态计算宽度，如果要添加图标，

iconWidth = 0.05*viewWidth 
textInputWidth = 0.95*viewWidth

否则textInputwWidth = viewWidth。

View 和 TextInput 背景颜色都是白色。 （小技巧）

【参考方案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-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”

【讨论】：

如果您不想使用库，可以这样做。旁注：如果您希望图标“消失”，则必须传递一个道具以了解搜索是否处于活动状态，然后根据该搜索道具切换图标的可见性。

【参考方案5】：

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

它是这样工作的：

将

Icon

和

TextInput

放入

父视图

将父级的

flexDirection

设置为

'row'

，这将对齐 孩子们挨在一起 给

TextInput flex 1

使其占据父视图的全部宽度 给

parent View

一个

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 上方，它将显示在左侧。）

【讨论】：

太好了！一项改进是将 alignItems: 'center' 添加到 passwordContainer 以便垂直居中输入和图标

【参考方案6】：

//This is an example code to show Image Icon in TextInput// 
import React,  Component  from 'react';
//import react in our code.

import  StyleSheet, View, TextInput, Image  from 'react-native';
//import all the components we are going to use. 

export default class App extends Component<> 
  render() 
    return (
      <View style=styles.container>
        <View style=styles.SectionStyle>
          <Image
            //We are showing the Image from online
            source=uri:'http://aboutreact.com/wp-content/uploads/2018/08/user.png',

            //You can also show the image from you project directory like below
            //source=require('./Images/user.png')

            //Image Style
            style=styles.ImageStyle
          />

          <TextInput
            style= flex: 1 
            placeholder="Enter Your Name Here"
            underlineColorAndroid="transparent"
          />
        </View>
         <View style=styles.SectionStyle>
          <Image
            //We are showing the Image from online
            source=uri:'http://aboutreact.com/wp-content/uploads/2018/08/phone.png',

            //You can also show the image from you project directory like below
            //source=require('./Images/phone.png')

            //Image Style
            style=styles.ImageStyle
          />

          <TextInput
            style= flex: 1 
            placeholder="Enter Your Mobile No Here"
            underlineColorAndroid="transparent"
          />
        </View>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  ,

  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',
  ,
);

Expo

【参考方案7】：

这在 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',

【参考方案8】：

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

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

【讨论】：

这是使用npmjs.com/package/react-native-vector-icons谢谢

【参考方案9】：

您还可以根据 Anthony Artemiew 的回复做一些更具体的事情：

<View style=globalStyles.searchSection>
                    <TextInput
                        style=globalStyles.input
                        placeholder="Rechercher"
                        onChangeText=(searchString) => 
                       this.setState(searchString)
                        underlineColorAndroid="transparent"
                    />
                     <Ionicons onPress=()=>console.log('Recherche en cours...') style=globalStyles.searchIcon name="ios-search" size=30 color="#1764A5"/>

 </View>

风格：

 searchSection: 
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius:50,
        marginLeft:35,
        width:340,
        height:40,
        margin:25
    ,
    searchIcon: 
        padding: 10,
    ,
    input: 
        flex: 1,
        paddingTop: 10,
        paddingRight: 10,
        paddingBottom: 10,
        paddingLeft: 0,
        marginLeft:10,
        borderTopLeftRadius:50,
        borderBottomLeftRadius:50,
        backgroundColor: '#fff',
        color: '#424242',
    ,

【参考方案10】：

 import  TextInput  from 'react-native-paper';

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

【参考方案11】：

任何为此苦苦挣扎的人

你也可以尝试关注我的

<View style=flex:1>
     <KeyboardAvoidingView enabled>
     <View style=flexDirection:'row',paddingBottom:5, borderColor:'#ccc',borderBottomWidth:1>
             <TextInput 
                  style=flex:1
                  onChangeText=(UserEmail) => setUserEmail(userEmail)
                  placeholder="Password"
                  placeholderTextColor="#ccc"
                  autoCapitalize="none"
                  keyboardType="default"
                  returnKeyType="next"
                  ref=passwordInputRef
                  onSubmitEditing=Keyboard.dismiss
                  blurOnSubmit=false
                />
                <FontAwesome5 name="eye" size=25 style=alignSelf:'center'/>
   </View>
   </KeyboardAvoidingView>
 </View>