[英]How to add icon left side in InputText in React Native
I am creating an App & I am working on the login screen.我正在创建一个应用程序,我正在登录屏幕上工作。 I need help to add user icon inside of Username field & password icon inside of a password field.我需要帮助在用户名字段内添加用户图标和密码字段内的密码图标。 I want to make it more beautiful app.我想让它更漂亮的应用程序。 & also suggest me other material design websites of react native like react-native-paper并且还建议我其他反应原生的材料设计网站,如 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'
}
});
If you are using react-native-paper as samples in your question, the solution is as follows.如果您在问题中使用 react-native-paper 作为示例,则解决方案如下。 You should make use of TextInput.Icon and the left or right property as explained in the documentation here您应该按照 此处的文档中的说明使用 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;
I had the same problem and did not get it to work until I wrapped the icon component in its own View
wrapper component.我遇到了同样的问题,直到我将 icon 组件包装在它自己的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>
);
}
Use this and make a icon in front of the text box.使用它并在文本框前面制作一个图标。 left={<TextInput.Icon name="account" color="white" />}
Though doing that with react-native-paper is super easy by just adding a right
prop (or left as you wish) and provide a <TextInput.Icon name='icon_name' />
as value but if you also want to animate the icon say when the data is being sent and you want to show a loading icon, you can do something like this;尽管使用 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;
To add an icon to the right side, you could put the Icon
and the TextInput
inside a View
, then this View
needs to have flexDirection:'row'
;要在右侧添加图标,您可以将Icon
和TextInput
放在一个View
,那么这个View
需要有flexDirection:'row'
;
<View style={{flexDirection: 'row'}}>
<Icon />
<TextInput />
</View>
Now Icon and TextInput are on the same line, you can play with width: x%
of the elements, and position in the X and Y axis with justifyContent
, and alingItems
.现在 Icon 和 TextInput 在同一行上,您可以使用width: x%
的元素,并使用justifyContent
和alingItems
在 X 和 Y 轴上alingItems
。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.