小编Vic*_*ina的帖子

想象一下你有这个导航系统：

  -TabNavigator
      --TabA
          ---StackNavigatorA
             ----ScreenA
             ----StackNavigatorB
      --TabB
          ---StackNavigatorB
             ----ScreenB

有什么方法可以使用 React Navigation 5 获得最接近的父导航器名称？例如，如果我在屏幕“ScreenA”中并执行我需要的方法，这将返回“StackNavigatorA”

像这样的东西：

     const currentNavigator = navigation.getCurrentNavigator(); // <--- getCurrentNavigator doesn't exist, this is pseudocode.
     console.log(currentNavigator); // Will show the closest parent navigator

谢谢你。

如何在 React Native 中执行真正柔和的振动？

当按下底部标签时，我试图获得与应用程序“Binance”（在 iPhone 11 上测试）中相同的振动。我不知道这个应用程序是否是在 React Native 中实现的，但我喜欢在选项卡之间移动时的轻微振动。

但是，当我这样做时

   <Tab.Screen
      name="Home"
      component={HomeStacks}
      listeners={() => ({
        tabPress: () => {
          Vibration.vibrate(); // from react-native
        },
      })}
    />

在我的应用程序中，在同一设备中进行测试，振动确实很困难。

我这样说并不是为了持续时间，而是为了振动的力量。

有任何想法吗？可以使用本机反应吗？

Pd：我尝试过使用

Vibration.vibrate(50)

为了减少持续时间，但它消失了（没有振动）

澄清

目前我正在使用这个包https://github.com/satya164/react-native-tab-view，但我也尝试过这个来自反应导航https://reactnavigation.org/docs/material-top-tab -navigator/并有同样的问题。

基本上我试图删除默认的 flexbox 行为“等高列”

介绍

我正在实现一个具有三个场景的选项卡视图。第一个将是一个带有无尽和分页平面列表的屏幕（其高度未确定），其他两个有自己的视图，高度确定。

问题

当第一个标签的内容被渲染时，它的高度是好的，但是当另一个标签被渲染并且它的高度大于第一个时，它（第一个标签）将其高度更改为另一个标签的高度。

第一个选项卡可以有 +100000 个项目，但假设目前它只有 1 个大小为 30px 的项目。第二个选项卡的高度不可变，为 40 像素，最后一个为 50 像素。

使用我当前的代码，会发生以下情况：

紫色空间不应该出现！！

代码

由于代码较长，我在相关部分注释了“<--------”。

export default function Tab(props) {
  const [index, setIndex] = useState(0);
  const [tab1Height, setTab1Height] = useState(null);
  const [tab2Height, setTab2Height] = useState(null);


  const [routes] = useState([
    { key: "tab0", title: "Tab0" },
    { key: "tab1", title: "Tab1" },
    { key: "tab2", title: "Tab2" },
  ]);

  const handleTabHeights …

我有一个关于 JS 中表单验证的问题。我知道应用程序的大部分输入必须在服务器端进行验证，但如果您也在客户端进行验证，您将避免对服务器进行不必要的请求。

另一方面，您的数据验证逻辑将暴露在您的客户端代码中（在我看来，绕过应用程序安全性的机会会更多），并且还会有代码重复（在服务器和客户端中）和仔细检查一切是否正确，这不是最佳性能。

有什么标准吗？到目前为止，我一直在后端做所有这些事情，但我对此有点好奇。

我真的很感激有经验的程序员的建议（利弊列表，如有必要）。

谢谢你。

想象一下按下按钮就可以点赞的帖子。此按钮会修改远程数据库，因此将喜欢的内容关联到特定帖子需要一些时间。

现在，如果用户使用以下代码开始如此快速地按下按钮：

 state = {
    isLiked: false,
 }

 handlePress = () => {
    this.setState(
      {
        isLiked: !this.state.isLiked,
      },
      this.handleLike
    );
  };

  handleLike = async () => {
    const { postId } = this.props;

    try {
      console.log(isLiked ? "Liking" : "Disliking")
      await db.processLike(postId);
    } catch (err) {
      // If an error has occurred, reverse the 'isLiked' state
      this.setState({
        isLiked: !this.state.isLiked,
      });

      // TODO - Alert the error to the user in a toast
      console.log(err);
    }

    console.log("DONE");
  };

由于一切都是异步的，因此可以看到这种情况：

喜欢

不喜欢

完成 …

假设 Tab Navigator 中有两个堆栈屏幕：

1. 选项卡 A -> 相机
2. 选项卡 B -> 个人资料

在配置文件屏幕中，在其堆栈中推送了其他相同类型（“配置文件”）（具有不同参数）的屏幕。现在，如果您在“相机”屏幕中并执行以下操作：

    navigation.navigate("Profile", { screen: "Profile", params });

您将导航到“配置文件”屏幕，这些参数将被发送到堆栈中的最后一个屏幕。如果我想导航到传递参数的堆栈的根，我该怎么办？

我试过：

   // In the profile screen
   useEffect(() => {
       if (navigation.canGoBack())
            navigation.popToTop(); // Go back to the root of the stack

       showParams(params);
   }, [params])

但是有了这个，“showParams”操作不在根目录中执行，我也没有从“相机”屏幕直接导航到堆栈的根目录。

我想我必须在导航之前在“相机”屏幕中执行以下操作：

  navigation.dispatch(
        CommonActions.reset({
          // some stuff
        })
  );

  navigation.navigate("Profile", { screen: "Profile", params });

但是我找不到任何方法来实现我的目标。

有任何想法吗？谢谢你。

更新 - 我的导航系统

堆栈（这里我定义了多个堆栈：“HomeStacks”、“SearchStacks”、“ProfileStacks”...）

const Stack = createStackNavigator();

export function ProfileStacks() { <------ Over this stack I do .push() …

我正在开发一个具有不同类型的错误、服务和域概念的复杂应用程序。

为了引发“对象”错误，我想到了两种不同的方法：

1. 应用于Object.assign()Error 对象（如果我只需要抛出遵循此形式的一个或几个错误，这是一个简单的选择）：

function f() {
  const err = new Error();

  Object.assign(err, {
    name: "ServiceError",
    code: "service/some-string-code",
    message: "Some message",
  });

  throw err;
}

try {
  f();
} catch(err) {
  console.log(err instanceof Error);
}

2. 创建自定义错误（扩展 Error 类）

class MyServiceError extends Error {
  constructor(code, message) {
    super(message);
  
    this.name = "ServiceError";
    this.code = code;
  }
}

function f() {
  const err = new MyServiceError("service/some-string-code", "Some message");

  throw err;
}

try {
  f();
} catch(err) {
  console.log(err instanceof Error);
  console.log(err …

我正在记录我的React Native组件，但我不知道如何正确执行。

对于文档生成，我使用jsdoc/better-docs，据说它能够收集您留下的评论PropTypes并将其包含在文档中。但是...由于不兼容问题，不可能在 React Native 中执行此策略，因此，它们PropTypes 不包含在文档中。

如何使用 JSDOC 记录此 React 组件？

/**
 * ??
 */
function Cat({ name, color = "#000" }) {
  return <View />;
}

Cat.propTypes = {
  name: PropTypes.string.isRequired,
  color: PropTypes.string,
};

我正在做以下事情：

/**
 * The cat properties.
 *
 * @typedef {object} Props
 * @property {string} name - The cat name.
 * @property {string} [color="#000"] - The cat color.
 */

/**
 * Cat component.
 *
 * @type {React.FC<Props>} …

介绍

我有一个 FlatList，它在页脚中呈现一个选项卡视图。此选项卡视图允许用户在一个 FlatList 或另一个 FlatList 之间切换。所以，最后这些是同级 FlatList。

问题

第一个 FlatList“A”的高度大于第二个 FlatList“B”的高度。当我选择第二个列表时，它的高度与“A”FlatList 的高度相同。

我在小吃中重现了该问题，您可以在其中看到类似的代码。我认识到代码有点长但太简单了，只需关注父 FlatList（在 App 组件中）和每个选项卡中呈现的两个 FlatList（在代码末尾）

问题

有什么想法如何解决这个问题吗？我不知道问题是否出在样式上，或者我是否必须做其他事情才能完成这项工作（所有平面列表都必须有自己的高度，而不是更大的高度）。

谢谢您，我非常感谢您的帮助。

问题

想象一下，您有一个带有数据库侦听器的屏幕，该侦听器是在 useEffect 中创建的，该侦听器的目的是增加屏幕中的计数器，如下所示：

（仅使用useEffect钩子，无依赖）

function MyScreen(props) {
     const [magazinesCounter, setMagazinesCounter] = useState(0);

     const handleMagazinesChanges = (snapshot) => {
         const changes = snapshot.docChanges();

         let _magazinesCounter = magazinesCounter;
       
         changes.forEach((change) => {
            if (change.type === "added") {
               _magazinesCounter  += 1;
            }
            if (change.type === "removed") {
               _magazinesCounter  -= 1;
            }
         });
         
         setMagazinesCounter(_magazinesCounter);  
     };

     useEffect(() => {
         const query = props.db.collection("content")
                        .where("type", "==", "magazine");
         
         // Create the DB listener
         const unsuscribe = query.onSnapshot(handleMagazinesChanges, (err) => {});
         return () => {
            unsuscribe();
         }
     }, …