react-native - 获取完成后如何在 native react 中导航到另一个屏幕

Question

我是 React Native 的新手，正在尝试创建我的第一个应用程序。所以我有一个问题:

我有 2 个屏幕(使用 react 导航)。在第一个屏幕上，有一个带有微调器(来自 native 基础)的应用程序 Logo 渲染，并同时获取到服务器。只有当获取结束并处理响应时，我才需要导航到另一个屏幕。我在 react-navigation docs 中找到的只是一个带有按钮的解决方案，但这不是我的情况。另外我不想使用 ActivityIndi​​catorIOS (应用程序应该适用于 Android)。

请帮助我了解我该怎么办？

非常感谢!

Answer 1

只需在 fetch 的 then 回调中调用导航函数或在 catch 中适本地处理错误。

react-navigation 中的每个屏幕获取 navigation支柱。您可以使用 navigate导航到任何屏幕的功能。像这样的东西

class FirstScreen extends React.Component {
  static navigationOptions = {
    title: 'First',
  }
  componentDidMount(){
    const {navigate} = this.props.navigation;
    navigate('Second');
    fetch('http://apiserver').then( (response) => {
      navigate('Second');
    });
  }
  render() {
    return (
      <AppLogo />
    );
  }
}

const AppNavigator = StackNavigator({
  First: {
    screen: FirstScreen,
  },
  Second: {
    screen: SecondScreen,
  },
});