Javascript 在react native中调用身份验证函数

我正在为我的应用程序设置基本身份验证屏幕。
我现在正在做的是一个按钮调用一个名为

auth

我的问题是，当我单击按钮，然后调用函数时，函数中似乎没有任何内容被执行。
这是我的密码：

import React from "react";
import {
  View,
  TextInput,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  Dimensions
} from "react-native";
import { Button, Text } from "native-base";


let width = Dimensions.get("window").width;
let height = Dimensions.get("window").height;

export default class Login extends React.Component {
  static navigationOptions = {
    title: "Login to Aeries"
  };

  constructor(props) {
    super(props);
    this.state = { isAuthed: false, username: "", authError: false, password: "" };
    this.auth = this.auth.bind(this);


    const showAlert = () => {
      Alert.alert(
        'There was an error loging in. Please check your username and password and try again.'
      )
    }
  }

  auth(){

    //do auth 
    this.setState({ authError: false,isAuthed: false });

    if (this.state.isAuthed === false && this.state.isAuthed === false && this.state.username == "admin" && this.state.password == "admin") { // authentication is successful
      this.setState({ isAuthed: true });
      this.props.navigation.navigate("Grades")
    } else { // auth error
      this.setState({ authError: true,isAuthed: false });
      this.showAlert
    }

  };
  render() {
    const { showAlert } = this.state
    return (
      <View style={styles.wrapper}>
        <KeyboardAvoidingView behavior="padding" style={styles.loginContainer}>
          <TextInput
            placeholder="school email"
            keyboardType="email-address"
            autoCapitalize="none"
            autoCorrect={false}
            placeholderTextColor="white"
            style={styles.input}
            value={this.state.username}
          />

          <TextInput
            placeholder="password"
            secureTextEntry
            autoCorrect={false}
            autoCapitalize="none"
            placeholderTextColor="white"
            style={styles.input}
            value={this.state.password}
          />

          <View style={{
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            margin: 12
          }}>

            <Button
              primary
              onPress={this.auth}
            >

              <Text> Login </Text>

            </Button>
          </View>

        </KeyboardAvoidingView>

      </View>
    );
  }
}

const styles = {
  loginContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: width - 42,
    backgroundColor: "#bdc3c7",
    borderRadius: 9,
    marginTop: 21,
    marginBottom: 21
  },

  input: {
    paddingHorizontal: 10,
    color: "#2c3e50",
    backgroundColor: "#95a5a6",
    margin: 12,
    height: 42,
    width: width - 69,
    borderRadius: 3
  },

  logo: {
    width: 231,
    height: 231
  },

  wrapper: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    marginTop: -21
  },

  loginButton: {
    borderRadius: 3,
    marginTop: 9,
    marginBottom: 21
  },
  error: {
    color: 'red',
    textAlign: 'center',
  }
};

从“React”导入React；
进口{
看法
文本输入，
样式表，
警觉的，
键盘避免了gView，
尺寸
}从“反应本族语”；
从“本机基”导入{按钮，文本}；
让宽度=尺寸。获取（“窗口”）。宽度；
让高度=尺寸。获取（“窗口”）。高度；
导出默认类登录扩展React.Component{
静态导航选项={
标题：“登录到Aeries”
};
建造师（道具）{
超级（道具）；
this.state={isAuthed:false，用户名：“”，authError:false，密码：“”；
this.auth=this.auth.bind（this）；
常量showAlert=（）=>{
警惕，警惕(
'登录时出错。请检查您的用户名和密码，然后重试。'
)
}
}
auth（）{
//杜撰
this.setState（{authError:false，isAuthed:false}）；
如果（this.state.isAuthed==false&&this.state.isAuthed==false&&this.state.username==“admin”&&this.state.password==“admin”）{//身份验证成功
this.setState（{isAuthed:true}）；
this.props.navigation.navigate（“等级”）
}else{//auth错误
this.setState（{authError:true，isAuthed:false}）；
这是showart
}
};
render（）{
const{showAlert}=this.state
返回(
登录
);
}
}
常量样式={
登录容器：{
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
宽度：宽度-42，
背景颜色：“bdc3c7”，
边界半径：9，
玛金托普：21，
marginBottom:21
},
输入：{
水平方向：10，
颜色：“2c3e50”，
背景颜色：“95a5a6”，
差额：12，
身高：42，
宽度：宽度-69，
边界半径：3
},
标志：{
宽度：231，
身高：231
},
包装器：{
弹性：1，
对齐项目：“中心”，
辩护内容：“中心”，
玛金托普：-21
},
登录按钮：{
边界半径：3，
玛金托普：9，
marginBottom:21
},
错误：{
颜色：“红色”，
textAlign:'中心'，
}
};

当我点击按钮时应该发生的是，它应该调用

auth

函数

auth函数应检查用户名和密码是否都是

admin

，如果都是，则导航到名为

Grades

（顺便说一句，我正在使用react导航）

如果用户名和密码不是“admin”，则会显示一个警报，说明身份验证未成功

---

提前谢谢。如果您希望我附加任何其他代码，请告诉我。

您的方法错误，请执行此操作

在构造函数中绑定函数

constructor(props) {
   super(props);
   this.auth = this.auth.bind(this);
}

这样设置函数

auth() {
   // Your chunk of code
}

<Button onPress={this.auth} />

按钮应该是这样的

auth() {
   // Your chunk of code
}

<Button onPress={this.auth} />

如果有任何问题，请在评论部分告诉我

---

选中此项

不必要的箭头功能将降低应用程序的速度。设置状态是异步的。使用回调执行与状态相关的控件。也可以合并设置状态。您不需要将它们分开。您应该像这样同时设置多个内容。setState（{test:true，test1:false}）；因为setState在调用时会触发渲染。谢谢您的快速回答！请大家注意，将你的函数移出构造函数。Raaj有一个错误，现在我在

auth

函数中的showAlert变量出现错误。不，绑定应该在构造函数中完成。根据facebook，这是一个很好的做法。。！嗯，当我在构造函数中有这个函数时，它就不能工作了。所以我把它搬走了，现在一切都好了，我们走吧。