React Native Firebase 项目教程
1. 项目的目录结构及介绍
React Native Firebase 项目的目录结构如下:
react-native-firebase/
├── android/
├── ios/
├── src/
│ ├── components/
│ ├── config/
│ ├── screens/
│ ├── utils/
│ └── index.js
├── App.js
├── index.js
├── package.json
└── README.md
目录结构介绍
android/
和ios/
:包含 Android 和 iOS 的原生代码。src/
:包含项目的源代码。components/
:存放可重用的 React 组件。config/
:存放项目的配置文件。screens/
:存放应用的各个页面。utils/
:存放工具函数和辅助类。index.js
:项目的入口文件。
App.js
:应用的主组件。index.js
:React Native 的入口文件。package.json
:项目的依赖和脚本配置。README.md
:项目的说明文档。
2. 项目的启动文件介绍
index.js
index.js
是 React Native 项目的启动文件,主要负责初始化应用并加载主组件。
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
App.js
App.js
是应用的主组件,包含了应用的路由和全局状态管理。
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他元数据。
{
"name": "react-native-firebase",
"version": "1.0.0",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-firebase": "^5.6.0"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/runtime": "^7.10.4",
"babel-jest": "^26.1.0",
"eslint": "^7.5.0",
"jest": "^26.1.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
firebase.js
firebase.js
文件包含了 Firebase 的初始化配置。
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
if