React Native - 交互式初始页面

Question

我有兴趣拥有一个最初加载我的React Native应用程序的视图，该应用程序基本上包含嵌套组件。这些组件将为用户提供关于应用程序所处状态的可视队列，例如：仍然从服务器加载数据等。基本上，它不仅仅是静态启动画面。我也可以添加一些微调器/进度条，例如：其他动画组件。

有静态启动屏幕的解决方案，最初会在您的应用加载到内存时显示，但我需要能够加载初始组件，然后在应用程序的数据准备就绪时将其删除。是否有遵循惯例/模式来实现这一目标？有没有办法安装组件，然后在不再需要允许显示应用程序的其余部分时将其删除？使用React Native的最佳做法是什么？

Answer 1

这就是我以前做的事情：

1. 使用<Modal />提供初始的互动页面。它会阻挡屏幕，背景为半透明;如果您希望它是全宽度，只需在flex: 1内的<View />内使用<Modal />。

2. 使用全局对象/队列来加载状态信息。我的选择是rxjs，那么您的初始页面可以只听取这一个真相来源，建议BehaviorSubject。因此，您可以订阅以下内容：

   ...
   { tag: 'FetchRemoteData', progress: 10 }
   { tag: 'LoadingComponent', progress: 5 }
   { tag: 'FetchRemoteData', progress: 20 }
   ...
   

阅读它，直到匹配你的'＃34;加载完成＆＃34;条件，然后关闭模型。

用代码清楚说明。

app.js

render() {
    return (
        <View>
            <InitialBlockingPage />
            <YourMainApp />
        </View>
    );
}

初始阻挡-page.js

constructor(props) {
    super(props);
    this.state = {
        visible: true
    };
}

componentDidMount() {
    globalQueue.subscribe( () => {
        /// pseudo code: until fully loaded
        if (fullloaded) this.setState({visible: false});
    });
}

render() {
    return (
        <Modal visible={this.state.visible}>
            <SplashScreenWithData />
        </Modal>
    );
}