Как передать уже реализованный компонент внутри шага copilot в 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.

что мне делать, чтобы этот код работал правильно

Ваш импорт правильный? Правильно ли вы экспортируете импортируемые компоненты? Какие из этих компонентов созданы на заказ?

parohy 10.09.2018 12:47

проверьте здесь github.com/mohebifar/…

Vijay Chouhan 06.11.2019 10:23
2
2
1 362
1

Ответы 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);

Наконец, добавьте шаг второго пилота и используйте новый компонент Walkthroughable там, где вы бы использовали TouchableOpacity.

<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);

Другие вопросы по теме