小编Ayu*_*mar的帖子

我正在使用react-native 和redux 制作一个送餐应用程序。我想从 firebase 存储中获取数据，为此，我在actions .js 中编写了一个函数，但每当我运行该应用程序时，它都会显示错误

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

这是我用来获取数据 action.js 的函数

import firebase from "firebase"
export const ProductDetails = (data) => {
  return {
    type: "PRODUCT_ITEMS",
    payload: {
      data,
    },
  };
};

var db = firebase.firestore();
var docRef = db.collection("Products").doc("Items");
export const FetchItems = () => {
  return async function (dispatch) {
    return await docRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document Data", doc.data());
          dispatch(ProductDetails(doc.data));
        } …

我正在尝试构建一个搜索栏，如果您将鼠标悬停在搜索图标上，它应该会展开。但直接对宽度进行动画处理并不高效，因此我决定使用变换，但它无法正确缩放搜索栏。这是屏幕截图。

使用正常宽度 图像时

使用变换 图像时

CSS代码：

.searchBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8px;
}

.search-content {
  font-size: 10px;
}

.search-input {
  width: 0px;
  background-color: transparent;
  padding: 0.5rem;
  padding-right: 2rem;
  border-radius: 2rem;
  border: none;
  outline: none;
  transition: 0.2s;
}

.searchBox:hover > .search-input {
  /* width: 8rem; */
  transition: scaleX(8rem);
  padding: 0.5rem;
  padding-right: 2rem; 
  background-color: rgb(240, 245, 248);
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.2);
}

.searchSvg {
  position: absolute;
  right: 0.62rem;
  transition: 0.3s;
  display: …