当文本输入被归档时更改颜色按钮

Question

当文本输入为空时，我需要将按钮设置为灰色，一旦所有字段都填满，将其更改为蓝色。

login.tsx

import React， {useState} from ' React ';import {View, Text, TextInput, touchableacity} from 'react-native';import ButtonOutline from '../../../infrastructure/components/buttons/button-outline-primary/index';从'../../../infrastructure/components/buttons/button-primary/index'导入ButtonPrimary;从'./styles'中导入样式;import {useForm, Controller} from 'react-hook-form';

导出默认函数LogInComponent () {

const { register, setValue, handleSubmit, control, reset, formState: { errors } } = useForm();
const onSubmit = data => {
console.log(data);
};

return (
<View style={styles.container}>
<View style={styles.boxTitle}>
<Text>YPF - GAS</Text>
</View>
<View style={styles.boxForm}>
<View style={styles.boxInput1}>
<Text style={styles.text}>Patente</Text>
<Controller
control={control}
render={({field: { onChange, onBlur, value }}) => (
<TextInput
style={styles.FormInput}
onBlur={onBlur}
onChangeText={value => onChange(value)}
value={value}
/>
)}
name="patente"
rules={{required: true}}
/>
</View>
<View style={styles.boxInput}>
<Text style={styles.text}>Planta  </Text>
<Controller
control={control}
render={({field: { onChange, onBlur, value }}) => (
<TextInput 
style={styles.FormInput}
onBlur={onBlur}
onChangeText={value => onChange(value)}
value={value} 
/>
)}
name="planta"
rules={{required: true}}
/>
</View>
<View style={styles.boxInput}>
<Text style={styles.text}>Usuario</Text>
<Controller
control={control}
render={({field: { onChange, onBlur, value }}) => (
<TextInput 
style={styles.UserFormInput}
onBlur={onBlur}
onChangeText={value => onChange(value)}
value={value}
/>
)}
name="usuario"
rules={{required: true}}
/>
</View>
<View style={styles.boxButton}>
<ButtonOutline style={styles.button} title= 'Cerrar'></ButtonOutline>
<ButtonPrimary onPress={handleSubmit(onSubmit)} style={styles.button}  title= 'Ingresar'></ButtonPrimary>
</View>
</View>
</View>
);

}

---

styles.tsx

import {StyleSheet} from 'react-native';import color from '../../../application/common/Colors ';

导出默认样式表。容器:{flex: 1、写成backgroundColor: Colors.surface}，boxTitle: {flex: 1、填充:5alignItems:"flex-start",justifyContent:"中心",写成backgroundColor: Colors.background}，boxForm: {flex: 9,填充:5}，boxInput: {flex: 0,alignItems:"中心",justifyContent:"中心",flexDirection:"行",marginTop: 30}，boxInput1: {flex: 0,alignItems:"中心",justifyContent:"中心",flexDirection:"行",marginTop: 70}，FormInput: {填充:0,lineHeight: 24日字形大小:20,宽度:168年,高度:40岁写成backgroundColor: Colors.background,borderRadius: 4borderWidth: 2borderColor:"# AAAAAA ',}，UserFormInput: {填充:0,字形大小:20,lineHeight: 24日宽度:168年,高度:40岁写成backgroundColor: Colors.surface,borderRadius: 4borderWidth: 2borderColor:"# AAAAAA ',}，文字:{右:60岁字形大小:20,lineHeight: 24}，boxButton: {上图:53岁flex: 1、flexDirection:"行",justifyContent:"空间"}，按钮:{宽度:216年,高度:40岁字形大小:18,lineHeight: 22},

});

Answer 1

在组件中使用touchableacity作为按钮

import React, {useState, useEffect} from 'react';
import {
Text,
View,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
const ButtonColor = () => {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [btnColor, setBtnColor] = useState(false);
useEffect(() => {
if (firstName !== '' && lastName !== '') {
setBtnColor(true);
} else {
setBtnColor(false);
}
}, [lastName]);
return (
<View style={styles.container}>
<View style={styles.secondContainer}>
<View style={styles.formContainer}>
<View style={styles.labelContainer}>
<Text style={{color: '#000'}}>First Name</Text>
</View>
<View style={styles.textContainer}>
<TextInput
defaultValue={firstName}
placeholder={'Type First Name'}
onChangeText={val => setFirstName(val)}
/>
</View>
</View>
<View style={styles.formContainer}>
<View style={styles.labelContainer}>
<Text style={{color: '#000'}}>Last Name</Text>
</View>
<View style={styles.textContainer}>
<TextInput
defaultValue={lastName}
placeholder={'Type Last Name'}
onChangeText={val => setLastName(val)}
/>
</View>
</View>
<View style={styles.formContainer}>
<TouchableOpacity
style={
btnColor
? styles.filledContainerButton
: styles.normalContainerButton
}>
<Text style={styles.btnTextColor}>Button</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
secondContainer: {
width: '85%',
height: 300,
marginTop: '40%',
paddingHorizontal: 20,
paddingVertical: 20,
// alignItems: 'center',
alignSelf: 'center',
borderRadius: 5,
borderWidth: 2,
borderColor: 'black',
},
formContainer: {
marginBottom: 20,
},
labelContainer: {
marginBottom: 5,
},
textContainer: {
borderWidth: 1,
borderColor: '#d3d3d3',
borderRadius: 3,
height: 40,
},
normalContainerButton: {
backgroundColor: '#808080',
height: 40,
width: '80%',
alignSelf: 'center',
// alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 9,
},
filledContainerButton: {
backgroundColor: 'blue',
height: 40,
width: '80%',
alignSelf: 'center',
// alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 9,
},
btnTextColor: {
color: '#fff',
},
});
export default ButtonColor;