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

如果您在问题中使用本机纸作为样本，解决方案如下。您应该按照文档中的说明使用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 2

我遇到了同样的问题，直到我将图标组件包装在它自己的 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 3

要将图标添加到右侧，可以将Icon和TextInput放在View内，然后此View必须具有{{1} };

flexDirection:'row'

现在Icon和TextInput位于同一行，您可以播放<View style={{flexDirection: 'row'}}> <Icon /> <TextInput /> </View>个元素，并使用width: x%和justifyContent在X和Y轴上定位。

Answer 4

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 5

尽管使用 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;

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

5 个答案: