使用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(索引)
    • TabNavigator的
      • 我的页面
      • MyPage(使用不同数据格式化的同一页面)
      • ...

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

我的应用程序中显示的第一页是MyPage页面.但正如你所看到的,由于TabNavigator,如果我将我的函数放入其中,它将被多次调用.

有些人会在启动画面中说,但我使用的是主闪屏部件,而且我没有很多控件.

我想到了我们创建提供程序的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

您应该在App.js初始化StackNavigator. StackNavigator如果我是你，我会放置一个加载屏幕，一旦数据准备好，该屏幕就会被结构取代。