React native 用状态覆盖按钮背景色

如果所有输入字段都已填充，我将尝试更改“继续”按钮的背景色 我似乎无法改变它 我这样做，它不会覆盖背景颜色，也不会改变状态 这是我的密码：

import React, { Component } from "react";
import firebase from "../util/firebase";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
  Alert,
} from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";

export default class Register extends React.Component {
  //State Constructor
  constructor() {
    super();
    this.state = {
      confirmPassword: "",
      email: "",
      password: "",
      isLoading: false,
      buttonColor: "#8b898a",
    };
  }
  //Change Button Color
  changeColor() {
    let currentColor = this.state.buttonColor;
    if (
      this.state.email != "" &&
      this.state.password != "" &&
      this.state.confirmPassword != ""
    ) {
      currentColor = "#7356bf";
    } else currentColor = "#8b898a";
    this.setState({ buttonColor: currentColor });
  }
  //Update Input State to Current Input Value
  updateInputVal = (val, prop) => {
    const state = this.state;
    state[prop] = val;
    this.setState(state, () => changeColor());
  };
  //Register Function
  registerUser = () => {
    //If Input Blank Return Alert
    if (this.state.email === "" && this.state.password === "") {
      Alert.alert("Enter details to signup!");
    }
    //If Passwords Dont Match Return Alert
    else if (this.state.password !== this.state.confirmPassword) {
      Alert.alert("Passwords Don't Match");
    }
    //If Everything OK Register User
    else {
      this.setState({
        isLoading: true,
      });
      firebase
        //Activate Auth
        .auth()
        //New Function
        //Create New User
        .createUserWithEmailAndPassword(
          this.state.email,
          this.state.password
          // this.state.confirmPassword
        )
        //After Creating User
        .then(() => {
          console.log("User registered successfully!");
          this.setState({
            isLoading: false,
            email: "",
            password: "",
            // confirmPassword: "",
          });
          //Something To Do After Everything Finished, for Example: this.props.navigation.navigate('Next Screen')
        })
        .catch(function (error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          if (errorCode == "auth/weak-password") {
            alert("The password is too weak.");
          } else if (errorCode == "auth/invalid-email") {
            alert("Email is Invalid");
          } else if (errorCode == "auth/email-already-in-use") {
            alert("Email is Already in use!");
          } else {
            alert(errorMessage);
          }
          console.log(error);
        });
    }
  };

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.preloader}>
          <ActivityIndicator size="large" color="#9E9E9E" />
        </View>
      );
    }
    return (
      <View style={styles.container}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>
            Create an account and join our studio
          </Text>
        </View>
        <View style={styles.inputsContainer}>
          <TextInput
            style={styles.emailInput}
            placeholder="Email"
            value={this.state.email}
            onChangeText={(val) => this.updateInputVal(val, "email")}
          />
          <TextInput
            style={styles.passwordInput}
            placeholder="Password"
            value={this.state.password}
            onChangeText={(val) => this.updateInputVal(val, "password")}
            maxLength={15}
            secureTextEntry={true}
          />
          <TextInput
            style={styles.confirmPasswordInput}
            placeholder="ConfirmPassword"
            value={this.state.confirmPassword}
            onChangeText={(val) => this.updateInputVal(val, "confirmPassword")}
            maxLength={15}
            secureTextEntry={true}
          />
        </View>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={[
              styles.loginButton,
              { backgroundColor: this.state.buttonColor },
            ]}
            title="Continue"
            onPress={() => this.registerUser()}
          >
            <Text style={styles.loginText}>Continue</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  //Views
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
  },
  titleContainer: {
    height: hp(10),
    width: wp(65.2),
    alignItems: "center",
    marginLeft: wp(17.4),
    marginRight: wp(17.4),
    marginTop: hp(17.1),
  },
  inputsContainer: {
    marginTop: hp(7.9),
    alignItems: "center",
  },
  buttonContainer: {
    alignItems: "center",
  },
  //Button
  loginButton: {
    flexDirection: "row",
    marginTop: hp(14),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 32.5,
    width: wp(78.3),
    height: hp(7.3),
    backgroundColor: "grey",
  },
  //Inputs
  emailInput: {
    height: hp(5.4),
    width: wp(65.2),
    borderBottomColor: "grey",
    borderBottomWidth: 1,
  },
  passwordInput: {
    height: hp(5.4),
    width: wp(65.2),
    marginTop: hp(6.3),
    borderBottomColor: "grey",
    borderBottomWidth: 1,
  },
  confirmPasswordInput: {
    height: hp(5.4),
    width: wp(65.2),
    marginTop: hp(6.3),
    borderBottomColor: "grey",
    borderBottomWidth: 1,
  },
  //Title
  title: {
    flex: 1,
    textAlign: "center",
    fontSize: hp(3.8),
  },
  //Loading
  preloader: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#fff",
  },
});

import React，{Component}来自“React”；
从“./util/firebase”导入firebase；
进口{
样式表，
文本，
看法
可触摸不透明度，
文本输入，
活动指示器，
警觉的，
}从“反应本族语”；
进口{
宽度百分比TODP作为wp，
高度百分比TODP作为hp，
}从“反应本机响应屏幕”；
导出默认类寄存器扩展React.Component{
//状态构造函数
构造函数（）{
超级（）；
此.state={
确认密码：“”，
电邮：“，
密码：“”，
孤岛加载：false，
按钮颜色：“8b898a”，
};
}
//更改按钮颜色
changeColor（）{
让currentColor=this.state.buttonColor；
如果(
this.state.email！“”&&
this.state.password！=“”&&
this.state.confirmPassword！“”
) {
currentColor=“#7356bf”；
}else currentColor=“#8b898a”；
this.setState（{buttonColor:currentColor}）；
}
//将输入状态更新为当前输入值
updateInputVal=（val，prop）=>{
const state=this.state；
状态[prop]=val；
this.setState（state，（）=>changeColor（））；
};
//寄存器功能
注册服务器=（）=>{
//如果输入空白返回警报
如果（this.state.email===”&&this.state.password===”）{
Alert.Alert（“输入要注册的详细信息！”）；
}
//如果密码不匹配，返回警报
else if（this.state.password！==this.state.confirmPassword）{
警报。警报（“密码不匹配”）；
}
//如果一切正常，请注册用户
否则{
这是我的国家({
孤岛加载：是的，
});
火基
//激活身份验证
.auth（）
//新功能
//创建新用户
.createUserWithEmailAndPassword(
这个.state.email，
此为.state.password
//this.state.confirmPassword
)
//创建用户后
.然后（（）=>{
log（“用户注册成功！”）；
这是我的国家({
孤岛加载：false，
电邮：“，
密码：“”，
//确认密码：“”，
});
//完成所有操作后要做的事情，例如：this.props.navigation.navigate（'Next Screen'））
})
.catch（函数（错误）{
//在这里处理错误。
var errorCode=error.code；
var errorMessage=error.message；
如果（错误代码==“验证/弱密码”）{
警报（“密码太弱。”）；
}else if（错误代码==“验证/无效电子邮件”）{
警报（“电子邮件无效”）；
}else if（错误代码==“已在使用身份验证/电子邮件”）{
警报（“电子邮件已被使用！”）；
}否则{
警报（错误消息）；
}
console.log（错误）；
});
}
};
render（）{
if（此.state.isLoading）{
返回(
);
}
返回(
创建一个帐户并加入我们的工作室
this.updateInputVal（val，“email”）}
/>
this.updateInputVal（val，“password”）}
maxLength={15}
secureTextEntry={true}
/>
this.updateInputVal（val，“confirmPassword”）}
maxLength={15}
secureTextEntry={true}
/>
this.registerUser（）}
>
继续
);
}
}
const styles=StyleSheet.create({
//观点
容器：{
弹性：1，
背景颜色：“ffffff”，
},
标题容器：{
高度：马力（10），
宽度：wp（65.2），
对齐项目：“中心”，
边际收益：可湿性粉剂（17.4），
边际收益率：wp（17.4），
马金托普：惠普（17.1），
},
输入容器：{
马金托普：惠普（7.9），
对齐项目：“中心”，
},
按钮容器：{
对齐项目：“中心”，
},
//钮扣
登录按钮：{
flexDirection:“行”，
马金托普：惠普（14），
对齐项目：“中心”，
辩护内容：“中心”，
边界半径：32.5，
宽度：wp（78.3），
高度：马力（7.3），
背景颜色：“灰色”，
},
//投入
电子邮件输入：{
高度：马力（5.4），
宽度：wp（65.2），
颜色：“灰色”，
边界宽度：1，
},
密码输入：{
高度：马力（5.4），
宽度：wp（65.2），
marginTop:hp（6.3），
颜色：“灰色”，
边界宽度：1，
},
确认密码输入：{
高度：马力（5.4），
宽度：wp（65.2），
marginTop:hp（6.3），
颜色：“灰色”，
边界宽度：1，
},
//头衔
标题：{
弹性：1，
textAlign：“居中”，
字体大小：hp（3.8），
},
//装载
预紧器：{
左:0,，
右:0,，
排名：0，
底部：0，
位置：“绝对”，
对齐项目：“中心”，
辩护内容：“中心”，
背景颜色：“fff”，
},
});

知道我做错了什么吗？ 如果有人知道答案，请详细解释，因为我对编码还不熟悉

---

更新：在updateInputVal中调用函数changeColor后，我得到一个错误“ReferenceError:找不到变量：changeColor”

在这段代码中，您没有在任何地方调用changeColor函数

您可以在输入文本更改时调用它（updateInputVal函数）

---

有些东西你必须改变：

1.原始状态颜色：

constructor（）{
超级（）；
此.state={
确认密码：“”，
电邮：“，
密码：“”，
孤岛加载：false，
按钮颜色：“8b898a”//为灰色
};
}

将更改颜色函数添加到

updateInputVal（）

updateInputVal=（val，prop）=>{
const state=this.state；
状态[prop]=val；
本.设置状态（状态）；
this.changeColor（）；//此处++
this.setState(state, () => this.changeColor());