如何在react-native-copilot中的Copilot步骤中传递已经实现的组件

Question

我正在尝试使用react native copilot为我的应用程序构建一个导览

https://github.com/okgrow/react-native-copilot

而且我不知道如何使用本教程中提到的its CopilotSteps中已经构建的组件。

到目前为止，这是我的代码，它给出了以下错误

  <CopilotStep
        text="This is a hello world example!"
        order={1}
        name="hello"
      >
        {({ copilot }) => (
          <Card snow to={`${basePath}/account`} {...copilot}>
            <Row inline justify="center" fluid>
              <Block inline justify="center">
                <FIcon name="shield" size={25} />
              </Block>
              <Block justify="center">
                <P compact>Account and Security</P>
                <P compact small helper>
                  Edit Your Account Information
                </P>
              </Block>
              <Block inline justify="center">
                <FIcon name="chevron-right" size={25} />
              </Block>
            </Row>
          </Card>
        )}
      </CopilotStep>

错误=>

D:\My Work\Company Projects\Ongoing\ZappyFoods\Mobile App\zappyfood_app\node_modules\react-native\Libraries\Core\ExceptionsManager.js:63 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我应该怎么做才能让这段代码顺利运行呢？

Answer 1

您必须使组件“可遍历”，例如，如果我的原始组件是一个简单的TouchableOpacity按钮。

 <TouchableOpacity
   onPress={this.callFunction}
 >
   <Icon name="photo" type="FontAwesome" />
 </TouchableOpacity>

然后，为了让它与copilot一起工作，首先导入walkthroughable。

import {
  copilot,
  walkthroughable,
  CopilotStep
} from "@okgrow/react-native-copilot";

然后调用传递TouchableOpacity组件的walkthroughable函数。

const WalkthroughableTouchableOpacity = walkthroughable(TouchableOpacity);

最后，添加copilot步骤，并在本应使用TouchableOpacity的位置使用新的Walkthroughable组件。

<CopilotStep
  text="Hey! This is the first step of the tour!"
  order={1}
  name="openApp"
>
  <WalkthroughableTouchableOpacity
    onPress={this.callFunction}
  >
     <Icon name="photo" type="FontAwesome" />
  </WalkthroughableTouchableOpacity>
</CopilotStep>

因此整个文件可能看起来像这样

import {
  copilot,
  walkthroughable,
  CopilotStep
} from "@okgrow/react-native-copilot";
import { Icon } from "native-base";
import React, { Component } from "react";
import { TouchableOpacity } from "react-native";

const WalkthroughableTouchableOpacity = walkthroughable(TouchableOpacity);

class Example extends Component {
  componentDidMount = async () => {
    this.props.copilotEvents.on("stepChange", () => {});
    this.props.start();
  };

  callFunction = () => {
    console.log("Button Pressed.");
  };

  render() {
    return (
      <CopilotStep
        text="Hey! This is the first step of the tour!"
        order={1}
        name="openApp"
      >
        <WalkthroughableTouchableOpacity onPress={this.callFunction}>
          <Icon name="photo" type="FontAwesome" />
        </WalkthroughableTouchableOpacity>
      </CopilotStep>
    );
  }
}

export default copilot({
  animated: true,
  overlay: "svg"
})(Example);