Reactjs React Native-输入为空时禁用登录按钮

所以我刚刚在我的react原生应用程序中创建了一个登录/注册表单

它看起来像这样：

我想“登录”按钮禁用，直到用户名和密码输入填写完毕

当输入为空时，“登录”按钮应为黑色，当我们填写输入时，“登录”按钮应为蓝色

这是我的密码：

import React from 'react';
import { 
    View, 
    Text, 
    StyleSheet,
    Platform,
    TextInput,
    StatusBar,
    Dimensions,
    TouchableOpacity,
    Button
} from 'react-native';
import FontAwesome, { SolidIcons, RegularIcons, BrandIcons } from 'react-native-fontawesome';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';

const SignInScreen = ({navigation}) => {

    const [data, setData] = React.useState({
        username: '',
        password: '',
        check_textInputChange: false,
        secureTextEntry: true,
    });

    const handlePasswordChange = (val) => {
        setData({
            ...data,
            password: val
        })
    }

    const updateSecureTextEntry = () => {
        setData({
            ...data,
            secureTextEntry: !data.secureTextEntry
        });
    }

    return(
        <View style={styles.container}>
            <StatusBar backgroundColor='#428df5' barStyle="light-content"/>
            <Animatable.View style={styles.header} animation="fadeInDownBig">
            <Text style={styles.text_header}>Sign in to your Account!</Text>
            </Animatable.View>

            <Animatable.View 
             style={styles.footer}
             animation="fadeInUpBig">
            <Text style={styles.text_footer}>Username</Text>
            <View style={styles.action}>
                <TextInput 
                placeholder="Your Username"
                style={styles.textInput}
                autoCapitalize = "none"
                />
            </View>

            <Text style={styles.text_footer, {
                marginTop: 35,
                fontSize: 18
            }}>Password</Text>
            <View style={styles.action}>
                <TextInput 
                placeholder="Password"
                secureTextEntry={data.secureTextEntry ? true : false}
                style={styles.textInput}
                autoCapitalize = "none"
                onChangeText={(val) => handlePasswordChange(val)}
                />
                <TouchableOpacity
                    onPress={updateSecureTextEntry}
                >
                    {data.secureTextEntry ? 
                <Text>
                    Show
                </Text>
                :
                <Text>
                    Hide
                </Text>}
                </TouchableOpacity>
            </View>

            <View style={styles.button}>
            <LinearGradient
                    colors={['#7aaef5', '#428df5']}
                    style={styles.signIn}
                >
                    <Text style={[styles.textSign, {
                        color:'#fff'
                    }]}>Sign In</Text>
            </LinearGradient>

            <TouchableOpacity
                    onPress={() => navigation.navigate('SignUpScreen')}
                    style={[styles.signIn, {
                        borderColor: '#428df5',
                        borderWidth: 1,
                        marginTop: 15
                    }]}
                >
                    <Text style={[styles.textSign, {
                        color: '#428df5'
                    }]}>Sign Up</Text>
            </TouchableOpacity>
            </View>
            </Animatable.View>
        </View>
    )
}

export default SignInScreen;

从“React”导入React；
导入{
看法
文本，
样式表，
平台，
文本输入，
状态栏，
尺寸，
可触摸不透明度，
按钮
}从“反应本机”；
从“react native FontAwesome”导入FontAwesome、{SolidIcons、Regulaticons、BrandIcons}；
从“react native Animatable”导入*作为可设置动画；
从“反应本机线性渐变”导入LinearGradient；
常量符号屏幕=（{navigation}）=>{
const[data，setData]=React.useState({
用户名：“”，
密码：“”，
检查\u textInputChange:false，
secureTextEntry:true，
});
常量handlePasswordChange=（val）=>{
设置数据({
…数据，
密码：val
})
}
const updatesecuretextcentry=（）=>{
设置数据({
…数据，
secureTextEntry:！data.secureTextEntry
});
}
返回(
登录您的帐户！
用户名
密码
handlePasswordChange（val）}
/>
{data.secureTextEntry？
显示
:
隐藏
}
登录
navigation.navigate（'SignUpScreen'）}
style={[style.sign{
边框颜色：“#428df5”，
边框宽度：1，
玛金托普：15
}]}
>
注册
)
}
导出默认标志屏幕；

---

请帮帮我，谢谢

您只需调用

usemo

即可导出名为

isFormValid

的新值，并使用它有条件地应用样式和禁用的

属性

import React，{usemo}来自“React”；
进口{
看法
文本，
文本输入，
状态栏，
可触摸不透明度，
}从“反应本族语”；
从“react native Animatable”导入*作为可设置动画；
从“反应本机线性渐变”导入LinearGradient；
常量符号屏幕=（{navigation}）=>{
const[data，setData]=React.useState({
用户名：“”，
密码：“”，
检查\u textInputChange:false，
secureTextEntry:true，
});
常量handlePasswordChange=（val）=>{
设置数据({
…数据，
密码：val，
});
};
const updatesecuretextcentry=（）=>{
设置数据({
…数据，
secureTextEntry:！data.secureTextEntry，
});
};
const isFormValid=useMoom（（）=>{
返回data.username.length>0&&data.password.length>0；
}，[data.username，data.password]）；
返回(
登录您的帐户！
用户名
密码
handlePasswordChange（val）}
/>
{data.secureTextEntry(
显示
) : (
隐藏
)}
登录
navigation.navigate（“SignUpScreen”）}
风格={[
签名先生，
！isFormValid&&
{
//您的禁用样式
},
{
边框颜色：“428df5”，
边框宽度：1，
玛金托普：15，
},
]}
>
注册
);
};
导出默认标志屏幕；