React-navigation 在發布 apk 中不起作用

Question

我在構建 apk 中遇到反應導航問題。 它不起作用。 在虛擬設備中沒問題，但是當我構建 apk 時它停止工作。

這是我的代碼：

class LoginScreen extends Component {

  constructor(){
           super();
           this.state = {
            email: '',
            password: '',
            result: false,
           }
       }

    _userLogin() {
      
         let email = this.state.email;
         let password = this.state.password;
         
         if (email && password) { 
           fetch("https://URL/api/login", {
             method: "POST",
             headers: {
               'Content-Type': 'application/json'
             },
             body: JSON.stringify({
               email: email,
               password: password,
             })
           })
           .then(async(response) => {
            let data = await response.json()
            if(response.status !== 200) {
              console.log(data.message)
            }
            return data})
           .then((responseData) => {
             this.renderResults(responseData)
             console.log(responseData)
           })
           .then(() => this.props.navigation.navigate(IntroScreen))
           .catch((err) => console.log(err.message))
           
         }
       }

       renderResults = (responseData) => {
           if(responseData){
                this.setState({
                    result: true
                })
           }
       }

       handleEmail = (text) => {
             this.setState({ email: text })
       }


       handlePassword = (text) => {
             this.setState({ password: text })
       }

  render() {

    return (
      <Container style={styles.container}>
        <StatusBar translucent backgroundColor="transparent"/>
        <Content>
        <View style={styles.imageContainer}>
          <Image style={styles.imageWave} source={require("./pictures/Group723.png")}/>
          <Text style={styles.headerTextContainer}>
              <Text style={styles.boldHeaderText}>Hotel </Text> 
              <Text style={styles.thinHeaderText}>Maids</Text>
          </Text>
        </View>
          <Text style={styles.loginThinText}>Log In</Text>      
        <CardView
          cardElevation={3}
          cardMaxElevation={4}
          cornerRadius={15}
           style={{
            marginTop: 1,
            width: 322,
            height: 104,
            alignSelf: 'center',
          }}>
        
          <TextInput  
          keyboardType="email-address" 
          style={styles.textAreaEmail} 
          placeholderTextColor="#C8C8C8" 
          placeholder="Username-HK"
          onChangeText={(text) => this.handleEmail(text)}
          />
          
          <TextInput 
          secureTextEntry={true} 
          style={styles.textAreaPassword} 
          placeholderTextColor="#C8C8C8" 
          placeholder="Password-HK"
          onChangeText={(text) => this.handlePassword(text)}
          />
        </CardView>

        <Button 
        ViewComponent={LinearGradient}
        linearGradientProps={{
          start: {x: 0, y: 0},
          end: {x: 1, y: 0},
          colors: ['#36C2CF', '#0093E9']
        }}
        type="clear" 
        title="SIGN IN"
        buttonStyle={styles.buttonLoginContainer}
        titleStyle={styles.loginBtnText}
        onPress={() => this._userLogin()}
        />
        </Content>
      </Container>
    );
  }
}

export default LoginScreen;

即使我僅使用“（）=> this.props.navigation.navigate（IntroScreen）”更改按鈕上的onPress功能。 它不起作用。 我認為這是請求函數中的東西。 但后來我只嘗試導航，但沒有奏效。

Answer 1

不要在 .then() 中使用 async 和 await。

假設您的介紹組件的名稱是字符串“IntroScreen”，您需要將其放在引號中。

另外，不要將導航放在它自己的 .then() 中。

.then((response) => {
            if(response.status !== 200) {
              console.log(data.message)
              return response.json();
            }
            })
           .then((responseData) => {
             this.renderResults(responseData)
             console.log(responseData)
             this.props.navigation.navigate('IntroScreen');
           })
           .catch((err) => console.log(err.message))