如何在React Native中的InputText左侧添加图标

Question

我正在创建一个应用程序并且正在登录屏幕上工作。我需要帮助在用户名字段内添加用户图标，在密码字段内添加密码图标。我想让它变得更漂亮的应用程序。并且还向我推荐其他 React Native 的材料设计网站，例如 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

我遇到了同样的问题，直到我将图标组件包装在其自己的包装组件中后才使其正常工作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 2

如果您在问题中使用react-native-paper作为示例，则解决方案如下。您应该使用 TextInput.Icon 以及 left 或 right 属性，如此处文档中 所述

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 3

要在右侧添加图标，您可以将Icon和 放在TextInput内View，然后View需要有flexDirection:'row';

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

现在 Icon 和 TextInput 位于同一行，您可以使用width: x%元素，并使用 、justifyContent和来调整 X 轴和 Y 轴的位置alingItems。