Question

登录按钮的

onPress ，我想导航到其他屏幕，基本上是一个带有身份验证用户名和密码的主屏幕。我正在使用堆栈导航器但是当我点击登录按钮时它只是点击api而没有任何反应。

从'react'导入React，{Component}; import { 样式表平台，文本，图片，查看，TouchableOpacity，ImageBackground，滚动型，AsyncStorage 来自'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Left, Body, Right, Item, Input } from 'native-base';

const ACCESS_TOKEN = 'access_token';
export default class Landing extends Component {
    static navigationOptions = { 
        header: false
        };
   constructor(props) {
      super(props);
      this.state = {
        username: "",
        password: "",
        error: "",
      };  
    }

  async storeToken(accessToken){
    try{
        await AsyncStorage.setItem(ACCESS_TOKEN, access_token)
        this.getToken();
    } catch (error) {
      console.log("Something went wrong")
    }
  }

  async getToken(accessToken){
    try{
        let token = await AsyncStorage.getItem(ACCESS_TOKEN)
       console.log("token is: " + token)
    } catch (error) {
      console.log("Something went wrong")
    }
  }

  async removeToken(){
    try{
      await AsyncStorage.getItem(ACCESS_TOKEN)
       console.log("token is: " + token)
       this.getToken();
    } catch (error) {
      console.log("Something went wrong")
    }
  }

  async onLoginPressed() {
    this.setState({showProgress: true})
    try {      
      let response = await fetch('https://fb3b2e18.ngrok.io/login', {
                  method: 'POST',
                  headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify({
                      username: this.state.username,
                      password: this.state.password,
                  })
                });
      let res = await response.text();
      if (response.status >= 200 && response.status < 300) {
          //Handle success
          this.setState({error: ""});
          let accessToken = res;
          this.storeToken(accessToken);
          console.log( "res token: " +  accessToken);
          //On success we will store the access_token in the AsyncStorage
          this.storeToken(accessToken);
      } else {
          //Handle error
          let error = res;
          throw error;
      }
    } catch(error) {
        this.removeToken();
        this.setState({error: error});
        console.log("error " + error);
    }
  }

    render() {
      const {goBack} = this.props.navigation;
      var {navigate} = this.props.navigation;
        return (
            <ImageBackground source={require('./landing.png')} style={styles.backgroundImage}>              
              <ScrollView automaticallyAdjustContentInsets={false} style={styles.scrollView}>   
                 <Text style={styles.welcome}>
                    Welcome to Flipclip
                  </Text>                                     
                  <View style={{alignItems: 'center', flex: 1,marginBottom: 60}}>                      
                    <Item style={{width: 310,marginBottom: 10}}>
                      <EvilIcons style={{color:'#fefefe'}} name='user' size={20} />
                      <Input 
                        style={{color: '#f5f5f5',fontSize: 14,fontFamily: 'Montserrat-Regular',}} 
                        placeholder='User Name'
                        placeholderTextColor= '#f5f5f5' 
                        onChangeText={ (text)=> this.setState({username: text}) }
                      />
                    </Item>                     
                    <Item style={{width: 310}}>
                      <Icon style={{color:'#fefefe'}} name='ios-lock-outline' size={20}/>
                      <Input 
                        style={{color: '#f5f5f5',fontSize: 14, marginLeft: 5,fontFamily: 'Montserrat-Regular',}} 
                        placeholder='Password'
                        placeholderTextColor= '#f5f5f5' 
                        onChangeText={ (text)=> this.setState({password: text}) }
                      />
                    </Item>
                  </View>
                  <View style={{alignSelf: 'center', flex: 1}}>
                    <Button block transparent style={styles.LoginButton} onPress = {this.onLoginPressed.bind(this)}  >
                      <Text style={styles.logintext}>Sign In</Text>
                    </Button>
                  </View>                  
                  <View style={{justifyContent: 'center'}}>
                    <Text style={styles.SignUpResendOtpText}>
                      Don’t have an account?&nbsp;
                      <Text style={styles.SignUpResendOtpLink} onPress = { () => navigate ("SignUp", {}) }>
                        Sign Up
                      </Text>
                    </Text>
                  </View>

                  <Text style={styles.error}>
                    {this.state.error}
                  </Text>
              </ScrollView>
            </ImageBackground>
        )
    }
}

const styles = StyleSheet.create({
    scrollView:{
      backgroundColor: 'rgba(0,0,0,0.7)', 
      flex:1,
    },
    backgroundImage: {
        flex: 1,
        width: null,
        height: null,
    },

    text: {
        color: 'white',
        fontSize: 32,
    },

  uploaderName:{
    fontSize: 16,
    color: '#fefefe'
  },
  welcome: {
    fontSize: 28,
    color: '#f5f5f5',
    textAlign: 'center',
    marginTop: 201,
    marginBottom: 135,
    fontFamily: 'FredokaOne-Regular'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  LoginButton: {
    borderRadius:100,
    backgroundColor: '#ff0046',
    width: 310, 
    marginBottom: 20,
  },
  logintext:{
    color: '#f5f5f5', 
    fontSize: 14,
    fontFamily: 'Montserrat-Medium',
  },
  error: {
    color: 'red',
    paddingTop: 10
  },
  SignUpResendOtpText: {
      color: '#f5f5f5',
      textAlign: 'center',
      fontSize: 14,
      fontFamily: 'Montserrat-Regular',
  },
  SignUpResendOtpLink:{
      color: '#ff0046',
      textAlign: 'center',
      fontSize: 14,
      fontFamily: 'Montserrat-Medium',
      textDecorationLine: 'none',
      textDecorationStyle: 'solid',
      textDecorationColor: '#000'
  },
  success: {
    color: 'green',
    paddingTop: 10
  },
});

Answer 1

前

<Button block transparent style={styles.LoginButton} onPress = {this.onLoginPressed.bind(this)}  >

后

<Button block transparent style={styles.LoginButton} onPress = { () => this.onLoginPressed.bind(this) }  >

Answer 2

我正在使用堆栈导航器，但是当我单击登录按钮时，它只是击中api，什么也没发生

这是因为您按应有的方式点击了api，但是一旦登录凭据成功就无法导航到主应用程序屏幕。

所以你错过了这个：

  if (response.status >= 200 && response.status < 300) {
          //Handle success
          this.setState({error: ""});
          let accessToken = res;
          this.storeToken(accessToken);
    // once successful navigate to another screen
    this.props.navigation.navigate('yourScreen',{}}
}

如何导航到主屏幕onPress登录按钮反应原生？

2 个答案: