React Native：登录按钮完成API验证后无法跳转首页的问题

看起来你已经搞定了登录API的验证和Token存储，但唯独漏了最关键的一步——登录成功后的页面跳转！另外你的代码里还有几处小细节问题，我帮你一步步解决：

1. 给登录成功逻辑加上跳转代码 #

在你的onLoginPressed方法里，当API返回成功状态（200-299）时，只做了Token存储，没有调用导航跳转方法。你需要在这里添加navigate方法跳转到首页（注意替换成你实际的首页路由名称，比如Home）：

修改后的onLoginPressed方法：

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) {
      // 处理成功逻辑
      this.setState({error: ""});
      let accessToken = res;
      this.storeToken(accessToken);
      console.log( "res token: " + accessToken);
      
      // ✅ 新增：登录成功后跳转到首页
      this.props.navigation.navigate('Home'); // 把'Home'换成你实际的首页路由名
    } else {
      // 处理错误逻辑
      let error = res;
      throw error;
    }
  } catch(error) {
    this.removeToken();
    this.setState({error: error});
    console.log("error " + error);
  } finally {
    // 可选：隐藏加载进度
    this.setState({showProgress: false});
  }
}

2. 修正AsyncStorage的代码错误 #

你的Token存储和移除方法里有两处小错误，会导致Token操作异常：

• storeToken里把参数accessToken写成了access_token
• removeToken里误用了getItem，应该用removeItem来删除Token

修正后的代码：

const ACCESS_TOKEN = 'access_token';

export default class Landing extends Component {
  // ...其他代码
  
  async storeToken(accessToken){
    try{
      await AsyncStorage.setItem(ACCESS_TOKEN, accessToken) // 修正拼写错误
      this.getToken();
    } catch (error) {
      console.log("Something went wrong")
    }
  }

  async getToken(){ // 这里不需要传参，直接从存储获取
    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.removeItem(ACCESS_TOKEN) // 修正：用removeItem删除Token
      console.log("Token removed successfully");
      this.getToken();
    } catch (error) {
      console.log("Something went wrong")
    }
  }
  
  // ...其他代码
}

3. 确认Stack Navigator的路由配置 #

要确保你的Stack Navigator已经正确注册了首页路由，比如：

// 假设你的首页组件是HomeScreen
const AppNavigator = StackNavigator({
  Landing: { screen: Landing },
  Home: { screen: HomeScreen },
  SignUp: { screen: SignUpScreen },
});

4. 可选：优化方法绑定方式 #

你可以在构造函数里提前绑定onLoginPressed，避免每次渲染都重新绑定函数：

constructor(props) {
  super(props);
  this.state = {
    username: "",
    password: "",
    error: "",
    showProgress: false // 新增加载状态变量
  };
  this.onLoginPressed = this.onLoginPressed.bind(this); // 提前绑定
}

然后按钮的onPress可以简化成：

<Button block transparent style={styles.LoginButton} onPress={this.onLoginPressed}>
  <Text style={styles.logintext}>Sign In</Text>
</Button>

这样修改后，当登录验证成功并存储Token后，就会自动跳转到首页了。

内容的提问来源于stack exchange，提问作者Kamlesh Tilwani