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（）中使用异步并等待。

假设简介组件的名称为字符串“ 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))

React-Navigation在发行版APK中不起作用

1 个答案: