0
391
VistasIngrese la etiqueta de texto en el borde en reaccionar nativo
Quiero crear un cuadro de entrada como este:
Pero lo diseñé así y no sé cómo agregar la etiqueta en el borde de entrada
Mi código es:
<InputBox label="Email" icon={true} keyboardType="email-address" defaultValue={emailId} onChangeText={text => setEmailId(text)} />Componente de entrada:
import React from 'react'; import {View, StyleSheet, TextInput, Text} from 'react-native'; import {COLORS} from '../constants/colors'; import {FONT_FAMILY} from '../constants/font-family'; export default function InputBox(props) { return ( <View style={styles.container}> <View style={{flex: 1}}> <Text style={styles.label}>{props.label}</Text> <TextInput placeholder={props.placeholder} placeholderTextColor="#9F9F9F" style={styles.input} keyboardType={props.keyboardType} secureTextEntry={false} defaultValue={props.defaultValue} onChangeText={props.onChangeText} editable={props.editable} /> </View> </View> ); } const styles = StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', marginBottom: 20, paddingTop: 7.5, paddingHorizontal: 12.5, paddingBottom: 2.5, borderRadius: 5, borderWidth: 0.75, borderColor: COLORS.WHITE, }, input: { fontFamily: FONT_FAMILY.primaryMedium, fontSize: 14, height: 37, color: COLORS.WHITE, }, label: { fontFamily: FONT_FAMILY.primary, marginLeft: 5, color: COLORS.WHITE, fontSize: 12, // marginTop: -30, }, });Al usar react-native-paper, cuando agrego un color de fondo transparente, se ve así:
3 Respuestas
Responde la pregunta0
Si tiene que usar un material con componentes de estilo ui, puede usar reactnativepaper
0
hola, puedes usar este código para importar React desde 'react';
import {View, StyleSheet, Text} from 'react-native'; import { TextInput } from 'react-native-paper'; export default function InputBox(props) { return ( <View style={styles.container}> <TextInput mode="outlined" label="Email" style={{width:'90%'}} /> </View> ); } const styles = StyleSheet.create({ container: { justifyContent:'center',alignItems:'center', flex:1 // borderColor: COLORS.WHITE, }, input: { // fontFamily: FONT_FAMILY.primaryMedium, fontSize: 14, height: 37, // color: COLORS.WHITE, }, label: { // fontFamily: FONT_FAMILY.primary, marginLeft: 5, // color: COLORS.WHITE, fontSize: 12, // marginTop: -30, }, });puedes probarlo en Snack
También puedes leer más sobre accesorios aquí react-native-paper
0
Pude lograr esto puramente en React Native sin ninguna dependencia. El truco consistía en poner el Text en una View con un color de fondo igual al de la pantalla y posicionar el Text absolutamente. Mi código de ejemplo codifica muchos valores, pero si desea que responda, deberá encontrar su propia forma de calcular esos valores. El código:
import { View, Text, TextInput, StyleSheet } from "react-native"; const Input = () => { return ( <View> <View style={styles.labelContainer}> <Text>Email Address</Text> </View> <View style={styles.inputContainer}> <TextInput placeholder="Enter email address" /> </View> </View> ); } const styles = StyleSheet.create({ labelContainer: { backgroundColor: "white", // Same color as background alignSelf: "flex-start", // Have View be same width as Text inside paddingHorizontal: 3, // Amount of spacing between border and first/last letter marginStart: 10, // How far right do you want the label to start zIndex: 1, // Label must overlap border elevation: 1, // Needed for android shadowColor: "white", // Same as background color because elevation: 1 creates a shadow that we don't want position: "absolute", // Needed to be able to precisely overlap label with border top: -12, // Vertical position of label. Eyeball it to see where label intersects border. }, inputContainer: { borderWidth: 1, // Create border borderRadius: 8, // Not needed. Just make it look nicer. padding: 8, // Also used to make it look nicer zIndex: 0, // Ensure border has z-index of 0 }, }); export default Input; Así es como se ve en mi dispositivo (Samsung Galaxy S10+): 