Question

我正在使用react-native-navigation v2，并且需要通过调用registerComponent（）将每个组件注册到导航中。但是，我发现自己有500行代码，使用相同的registerComponent结构在其中注册应用程序的每个组件，唯一的区别是，对我注册的每个组件使用不同的jsx标签，就像这样：

import ItemsList from './src/components/ItemsList';
import { Navigation } from "react-native-navigation";
import { Provider } from "react-redux";
import reduxStore from "./src/store";

Navigation.registerComponent(
  "app.ItemsList",
  () => props => (
    <Provider store={reduxStore}>
      <ItemsList {...props} />
    </Provider>
  ),
  () => ItemsList
);
+++ 35 more components almost exactly just like this one

现在，为了减少大量相同的代码，我决定编写一个IIFE，该IIFE可以通过一系列看起来像这样的对象（组件）进行映射：

[...,
  {
    name: "ItemsList",
    component: ItemsList
  },
...]

然后在每个项目上调用registerComponent并返回我需要的JSX，如下所示：

(function componentsRegistration() {
  return components.map(({ name, component }) => {
    const Tag = name;
    Navigation.registerComponent(
      `app.${name}`,
      () => props => (
        <Provider store={reduxStore}>
          <Tag {...props} />
        </Provider>
      ),
      () => component
    );
  });
})()

在进行了特定的操作之后，我的应用不再呈现。而是抛出“不变违反：找不到名称ItemsList的视图配置”。我认为我已经遵循了React命令（大写字母jsx标签等），但是无法正常工作。如果有人可以，请帮忙。

Answer 1

[已解决]我因为尝试传递带有组件名称而不是组件本身的字符串而出错。

正确的方法是：

const Tag = component;

代替：

const Tag = name;

React-Native-找不到名称“自定义标签”的视图配置

1 个答案: