在React Native中使用Redux获取并显示来自Firestore的所有数据时,可以通过显示活动指示器来提供用户反馈,以确保数据加载过程中用户不会感到困惑。下面是一种实现方法:
- 首先,安装所需的依赖:
- 首先,安装所需的依赖:
- 创建Redux store:
在项目中创建一个名为store.js的文件,并添加以下代码:
- 创建Redux store:
在项目中创建一个名为store.js的文件,并添加以下代码:
- 创建Redux reducer:
在项目中创建一个名为reducers.js的文件,并添加以下代码:
- 创建Redux reducer:
在项目中创建一个名为reducers.js的文件,并添加以下代码:
- 创建Redux actions:
在项目中创建一个名为actions.js的文件,并添加以下代码:
- 创建Redux actions:
在项目中创建一个名为actions.js的文件,并添加以下代码:
- 创建React Native组件:
在项目中创建一个名为YourComponent.js的文件,并添加以下代码:
- 创建React Native组件:
在项目中创建一个名为YourComponent.js的文件,并添加以下代码:
- 在主组件中使用YourComponent:
在主组件中引入YourComponent,并将其作为一个子组件使用:
- 在主组件中使用YourComponent:
在主组件中引入YourComponent,并将其作为一个子组件使用:
这样,当YourComponent组件加载时,会触发fetchData action,该action会在数据加载过程中显示活动指示器。一旦数据加载完成,活动指示器将被替换为从Firestore获取的数据列表。
注意:以上代码示例中的'your_collection'应替换为您在Firestore中的实际集合名称。此外,您还需要根据您的项目结构和需求进行适当的调整和扩展。