Question

我正在尝试使用React Native Copilot为我的应用构建导览

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

而且我无法弄清楚如何使用本教程中提到的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>

然后使其与副驾驶员一起使用，首先导入可漫游。

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

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

const WalkthroughableTouchableOpacity = walkthroughable(TouchableOpacity);

最后添加副驾驶步骤，并在将要使用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);

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

1 个答案: