Je crée une application et je travaille sur l'écran de connexion. J'ai besoin d'aide pour ajouter une icône d'utilisateur à l'intérieur du champ Nom d'utilisateur et une icône de mot de passe à l'intérieur d'un champ de mot de passe. Je veux rendre l'application plus belle. & me suggérer également d'autres sites Web de conception matérielle de react native comme 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'
}
});
4 Réponses :
Pour ajouter une icône sur le côté droit, vous pouvez mettre l ' Icône et la TextInput dans une Vue , puis ce La vue doit avoir flexDirection:'row';
<View style={{flexDirection: 'row'}}>
<Icon />
<TextInput />
</View>
Maintenant, Icon et TextInput sont sur la même ligne, vous pouvez jouer avec une largeur de : x% des éléments, et position dans les axes X et Y avec justifyContent et alingItems.
@AdeelAhmed pour définir deux éléments dans le même axe X, vous devez utiliser flexDirection: 'row' , ou float: 'left' . Jouez avec ces 2 propriétés pour obtenir ce que vous désirez.
avez-vous un exemple de code, veuillez m'envoyer si vous le pouvez. Merci. ;)
<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>
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;
Si vous utilisez react-native-paper comme exemples dans votre question, la solution est la suivante. Vous devez utiliser TextInput.Icon et la propriété left ou right comme expliqué dans la documentation ici
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;
p >
J'ai eu le même problème et je n'ai pas réussi à le faire fonctionner avant d'avoir enveloppé le composant icône dans son propre composant wrapper 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>
);
}
Exemple simple
Ouais comme ça mais je veux faire ça avec react native