如何在 React Native 的输入文本中添加图标左侧

Question

我正在创建一个应用程序并且我正在登录屏幕上工作。 我需要帮助在用户名字段内添加用户图标和密码字段内的密码图标。 我想让它更漂亮的应用程序。 & 也向我推荐其他反应原生的材料设计网站，如 react-native-paper

import React from 'react';
import { StyleSheet, Text, View,Alert,Icon} from 'react-native';
import { TextInput,Button,IconButton,Colors,Avatar } from 'react-native-paper';
import { SQLite } from 'expo-sqlite';
const db = SQLite.openDatabase('test.db');

class SignInScreen extends React.Component {

state = {
   UsernameOrEmail  : '',
   Password : '',
}
render() {
  return (
    <View style={{ flex: 1, justifyContent: "center" }}>

        <View style={{alignItems: 'center',backgroundColor:'yellow',height:170}}>
            <Avatar.Image size={180} source={require('../assets/avatar.png')} style={{marginTop:-80}}/>
        </View>
        <TextInput
          label='Username or Email'
          value={this.state.UsernameOrEmail}
          style={[styles.textinput ,{marginTop:-10}]}
          onChangeText={(text) => this.setState({UsernameOrEmail : text})}
        />
        <TextInput
          label='Password'
          value={this.state.Password}
          style={styles.textinput}
          onChangeText={(text) => this.setState({ Password:text}) }
        />


        <Button  icon="person-add"  mode="contained" 
        style={styles.buton}
        onPress={()=>this.props.navigation.navigate("Login")} > Sign In</Button>

        <Button icon="person-add" mode="contained" 
        style={styles.buton}
        onPress={()=>this.props.navigation.navigate("SignUp")} > SignUp</Button>

    </View>
  );
 }
}

export default SignInScreen;


const styles = StyleSheet.create({
 container: {
  backgroundColor: '#fff',
 },
 textinput:{
  marginLeft:5,
  marginLeft:5,
  backgroundColor: 'transparent'
  },
  buton:{
   margin:10,
   backgroundColor: '#f05555'
    }  
 });

Answer 1

使用它并在文本框前面制作一个图标。 left={<TextInput.Icon name="account" color="white" />}

Answer 2

虽然使用 react-native-paper 做到这一点非常简单，只需添加一个 right 属性（或根据需要保留）并提供一个 <TextInput.Icon name='icon_name' /> 作为值，但如果您还想为图标设置动画，请在正在发送数据并且您想显示加载图标，您可以执行以下操作；

import * as React from 'react';
import { View } from 'react-native';
import { TextInput, ActivityIndicator } from 'react-native-paper';

const MyComponent = () => {
  const [animation, setAnimation] = React.useState(false);

  return (
    <View style={{ margin: 10 }}>
      <TextInput
        label="Password"
        right={
          <TextInput.Icon
            name={animation ? '' : 'crosshairs-gps'}
            onPress={() => setAnimation(true)}
          />
        }
      />
      <ActivityIndicator style={animation ? {position:'absolute', right: 0, margin: 20} : {}} animating={animation} />
    </View>
  );
};

export default MyComponent; 

Answer 3

我遇到了同样的问题，直到我将图标组件包装在它自己的 View 包装器组件中之后才让它工作。

function Input(props) {
  return (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        height: 40,
      }}
    >
      <View
        style={{
          position: "absolute",
          zIndex: 1,
          left: 10,
        }}
      >
        <Icon name="icon-name" size={40} color="#00F" />
      </View>
      <TextInput
        onChangeText={props.onChangeText}
        value={props.value}
      />
    </View>
  );
}

Answer 4

如果您在问题中使用 react-native-paper 作为示例，则解决方案如下。 您应该按照文档中的说明使用 TextInput.Icon 和 left 或 right 属性 here

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

function TextInputWithIcon() {
  return (
    <TextInput label="TextInputWithIcon"
      left={<TextInput.Icon name="alert-circle" size={28} color={'red'} />}
      right={<TextInput.Icon name={'cellphone'} size={28} color={'blue'} />}
    />

  );
}

export default TextInputWithIcon;

Answer 5

import React from "react";
import { View, TextInput} from "react-native";
//styles 
import { styles, placeholder_color } from "./styles";





const RNtextinput = (props) => {
    const { placeholder = "", value="", secure_text_entry=false, auto_correct=true, keyboard_type="default" , max_length = 200, style={}, input_container_style={}, onChangeText, disabled=false } = props;
    return (
        <View style={[styles.input_wrappers,input_container_style]}>
            <TextInput
             
                value={value}  
                editable={!disabled} 
                style={[styles.input,style]}
                placeholder={placeholder}
                secureTextEntry={secure_text_entry}
                placeholderTextColor={placeholder_color}
                keyboardType={keyboard_type}
                underlineColorAndroid="transparent"
                maxLength={max_length}
                onChangeText={onChangeText}
            />
        </View>
    );
  
}



export default RNtextinput;

import {StyleSheet, Dimensions} from 'react-native';

const DEVICE_WIDTH = Dimensions.get('window').width;
import { theme } from "./../../themes/index";
 
export const styles = StyleSheet.create({
    input           : {
        borderColor     : theme.secondary_dark_color,
		color           : theme.secondary_dark_color,
        marginTop       : 15,
        marginBottom    : 15,
        width           : DEVICE_WIDTH - 70,
        height          : 50,
        marginHorizontal: 20,
        paddingLeft     : 25,
        paddingRight    : 25,
        fontSize        : 20,
        flexDirection   : "row",
        backgroundColor :theme.background_color,
    },
    input_wrapper   : {
        flex            : 1,    
    },
});


export const placeholder_color = theme.primary_color;



////
import { StyleSheet } from "react-native";
import { theme } from "./../../themes/index";
export const styles = StyleSheet.create({
    page_style : { 
        flex            : 1, 
        
        backgroundColor : theme.light_background_color, 
         
        width           : "100%"
    },
    icon_style : {
        lineHeight      : 40,
        padding         : 20,
        marginLeft      : 10,
        paddingRight    : 10
    },
    input_tag : { 
        
		borderRadius:5, 
		borderWidth:2,
		fontWeight:"bold"
    },
    
})





/////
import React from "react";

import { View } from "react-native";
import RNtextinput from "../../components/rn_input";
import Icon from "react-native-vector-icons/FontAwesome5";
import { styles } from "./styles"; 

const DashBoardSeacrhBar = () => {
    return (
        <View style={{ flexDirection: 'row'}}>
            <View style={{ width:"80%" , alignContent:"center" }}>
                <RNtextinput value={""} onChangeText={text => setPassword(text)} placeholder="Search" style={styles.input_tag}/>
            </View>
            <View style={{ width:"20%", alignContent:"center"  }}>
                <Icon name="arrow-right" size={40} style={styles.icon_style} />
            </View>
        </View>
    )
}


			

export default DashBoardSeacrhBar;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>

Answer 6

要在右侧添加图标，您可以将Icon 和TextInput 放在View 中，那么这个View 需要有flexDirection:'row'；

<View style={{flexDirection: 'row'}}>
 <Icon />
 <TextInput />
</View>

现在 Icon 和 TextInput 在同一行，你可以使用 width: x% 的元素，在 X 和 Y 轴上使用 justifyContent 和 alingItems 定位。