我一直在开发一个兼容iOS和Android设备的React Native Expo应用程序。在这个应用程序中,我需要从我的谷歌firebase数据库检索和渲染数据。
我想把我的firebase代码重写成config.js文件,因为目前我在每个应用程序屏幕内都有firebase脚本,这会导致问题。相反,我想编写一个导出数据的config.js文件,允许我通过import语句检索每个屏幕中的数据:
import { CustomerData } from '../app/config.js';
当我使用检索到的'info'数据时,下面的代码(减去export语句)在每个屏幕上都工作得很好。但是,当向屏幕添加新功能时,这会导致问题,并且是检索google firebase数据的低效方法。
我试着写config.js文件,像这样:
import "firebase/firestore";
import * as firebase from "firebase";
import React, { useState, Component, useEffect } from "react";
import "react-native-gesture-handler";
const firebaseConfig = {
apiKey: <My Api Key>,
authDomain: <My AuthDomain>,
projectId: <My Project Id>,
storageBucket: <My storage Bucket>,
messagingSenderId: <Sender Id>,
appId: <App ID>,
measurementId: <Measurement ID>,
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app();
}
function GetData() {
const [info, setInfo] = useState([]); // Initial empty array of info
useEffect(() => {
const dbh = firebase.firestore();
dbh
.collection("CustomerDatabase")
.get()
.then((querySnapshot) => {
const info = [];
querySnapshot.forEach((documentSnapshot) => {
info.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setInfo(info);
});
}, []);
export info;
我相信我需要添加一个导出功能,导出检索到的数据- 'info'。但是,我试图将此导出语句放置在脚本中的不同位置,它返回错误
SyntaxError: 'import'和'export'可能只出现在顶层。(44:0)
即使将导出语句放在脚本的开头,我仍然会收到相同的错误。此外,当删除导出状态时,它会抛出错误:
TransformError SyntaxError: Unexpected token (44:15)表明最后一行是罪魁祸首。同样的代码格式也适用于应用程序屏幕。
我如何从config.js文件中导出'info'数据?还是我必须坚持从每个屏幕js文件中检索我的firebase数据?
我运行了这段代码,除了忘记添加大括号来关闭GetData函数之外,似乎没有其他错误
import "firebase/firestore";
import * as firebase from "firebase";
import React, { useState, Component, useEffect } from "react";
import "react-native-gesture-handler";
const firebaseConfig = {
apiKey:"",
authDomain:"",
projectId:"",
storageBucket:"",
messagingSenderId:"",
appId:"",
measurementId:"",
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app();
}
function GetData() {
const [info, setInfo] = useState([]); // Initial empty array of info
useEffect(() => {
const dbh = firebase.firestore();
dbh
.collection("CustomerDatabase")
.get()
.then((querySnapshot) => {
const info = [];
querySnapshot.forEach((documentSnapshot) => {
info.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setInfo(info);
});
}, []);
}
export {info};
这是有意义的,因为info不是一个全局变量,你在GetData中将info声明为一个变量,所以如果你想要访问它,你应该在GetData()函数中返回它。然后你现在可以导出GetData,你应该从函数中得到信息。
import "firebase/firestore";
import * as firebase from "firebase";
import React, { useState, Component, useEffect } from "react";
import "react-native-gesture-handler";
const firebaseConfig = {
apiKey:"",
authDomain:"",
projectId:"",
storageBucket:"",
messagingSenderId:"",
appId:"",
measurementId:"",
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app();
}
function GetData() {
const [info, setInfo] = useState([]); // Initial empty array of info
useEffect(() => {
const dbh = firebase.firestore();
dbh.collection("CustomerDatabase").get().then((querySnapshot) => {
const info = [];
querySnapshot.forEach((documentSnapshot) => {
info.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setInfo(info);
});
}, []);
return(info);
}
export {info};
//Then wherever you want to use info you can just do this...
import {GetData} from "filepath";
const info = GetData();
我喜欢在我的react应用中导出状态的另一种方式是在我的app. js中定义状态,这样它就可以被我应用中的每个组件访问。下面是我如何为我的应用导出一个包含主题的状态的例子。我把我的状态和它的setter作为道具传递给我的AppRouting组件。然后,每当我有一个组件,我想要访问我的AppRouting中的主题时,我只需这样做:theme={props。主题}setTheme = {props.setTheme}
import { useState } from "react";
import { Box, ThemeProvider, } from "@mui/material";
import { darkTheme } from "./Theming/AppTheme";
import AppRouting from "./Pages/AppRouting";
const App = () => {
const [theme, setTheme] = useState(darkTheme);
return(
<ThemeProvider theme={theme}>
<Box
sx={{
position:"absolute",
width:"100vw",
height:"auto",
minHeight:"100vh",
top:"0",
left:"0",
display:"flex",
backgroundColor:"background.default",
}}
>
<AppRouting
theme={theme}
setTheme={setTheme}
/>
</Box>
</ThemeProvider>
);
}
export default App;