React Native-交互式初始页面

Question

我有兴趣拥有一个视图，该视图最初加载了我的React本机应用程序，该应用程序本质上嵌套了其中的组件。这些组件将向用户提供视觉队列，以了解该应用程序所在的状态，例如：仍在服务器上加载数据等。基本上，它不仅是静态飞溅屏幕。我还可能添加某种旋转器/进度栏，例如：其他动画组件。

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

Answer 1

这是我过去做的：

1. 使用<Modal />提供您的初始交互式页面。它将以半透明的背景阻塞屏幕；如果您喜欢它是完整的宽度，只需在<Modal />内的<View />中使用flex: 1。

2. 使用全局对象/队列加载状态信息。我的选择是rxjs，那么您的初始页面只能听取这个真理的来源，提出了一个行为。因此，您可以在其中订阅以下内容：

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

阅读它，直到匹配您的"负载完成"条件，然后关闭模型。

用代码清楚。

app.js

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

初始阻止页

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>
    );
}