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

Question

我正在创建一个应用程序并且我正在登录屏幕上工作。
我需要帮助在用户名字段内添加用户图标和密码字段内的密码图标。
我想让它更漂亮的应用程序。
& 还建议我其他 react 原生的 Material 设计网站，如 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>
  );
}