-1

To querendo fazer um componente geral que possa ser alterado conforme as necessidades no meu projeto (treino). Do jeito que estou fazendo a variavel passada não é reconhecida no styles. É possível fazer?

export default function InputPadrao({ nameIcon, placeholder, keyBoardType, qtd}){
return(
    <View style={estilos.view}>
        <MaterialCommunityIcons name= {nameIcon} size={35} color="white" />
        <TextInput style={estilos.input}  placeholder={placeholder} placeholderTextColor= '#fff' keyBoardType={keyBoardType}/>
    </View>  
)
};

const estilos = StyleSheet.create({
input: {
    borderWidth: 1,
    paddingLeft: 10,
    paddingVertical:3,
    borderRadius: 30,
    borderColor: '#fff',
    width: qtd ===2? '37%' : qtd===3? '25%': '75%',
    height: 40,
},
view: {
    backgroundColor: 'grey',
    flexDirection: 'row',
    width:'100%',
    justifyContent: 'space-around',
    alignItems: 'center',
}
});

1 Resposta 1

0

A const estilos está fora do escopo do componente, por isso não pode acessar a props. O que você pode fazer é passar só esse atributo específico dentro do componente, enquanto o resto do estilo permanece fora.

Assim:

 <TextInput style={[estilos.input, {width: qtd ===2 ? '37%' : qtd===3? '25%': '75%'}]}  placeholder={placeholder} placeholderTextColor= '#fff' keyBoardType={keyBoardType}/>
input: {
    borderWidth: 1,
    paddingLeft: 10,
    paddingVertical:3,
    borderRadius: 30,
    borderColor: '#fff',
    height: 40,
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .