react-native - 在哪里使用react-navigation初始化数据加载

Question

我正在使用react-navigation，这是我的结构:

根堆栈导航器:

export const Root = StackNavigator({
Index: {
    screen: Index,
    navigationOptions: ({ navigation }) => ({

    }),
},
Cart: {
    screen: Cart,
    navigationOptions: ({ navigation }) => ({
        title: 'Votre panier',
        drawerLabel: 'Cart',
        drawerIcon: ({ tintColor }) => <Icon theme={{ iconFamily: 'FontAwesome' }} size={26} name="shopping-basket" color={tintColor} />
    }),
},
...

我的结构如下:

• StackNavigator (Root)
  • DrawerNavigator (Index)
    • TabNavigator
      • MyPage
      • MyPage (same page formatted with different datas)
      • ...

所以我的问题是，我在哪里加载数据、初始化我的应用程序？我需要在其他页面之前调用一次的地方。

我的应用程序中显示的第一个页面是 MyPage 页面。但正如你所看到的，由于 TabNavigator，如果我把函数放在里面，它会被调用很多次。

有些人会在闪屏中说，但我正在使用主 splashscreen component而且我对此没有太多控制权。

我想到了我们在其中创建提供程序的 App.js，但我认为这不是一个好主意？

const MyApp = () => {

    //TODO We're loading the data here, I don't know if it's the good decision
    ApplicationManager.loadData(store);
    SplashScreen.hide();

    return (
        <Provider store={store}>
            <Root/>
        </Provider>
    ); 
};

有什么好的方法吗？

Answer 1

class MyApp extends Component {

  state = {
    initialized: false
  }

  componentWillMount() {
    // if this is a promise, otherwise pass a callback to call when it's done
    ApplicationManager.loadData(store).then(() => {
      this.setState({ initialized: true })
    })
  }

  render() {
    const { initialized } = this.state
    if (!initialized) {
      return <SplashScreen />
    }
    return (
      <Provider store={store} >
        <Root />
      </Provider>
    );
  }
}