Question

我正在开发一个component并将其发布在npm中，但我想使用method而不是标签来调用我的组件。

示例：

myComponent.js

import React from 'react'
import { View, Text } from 'react-native'

export const showComponent = () => {
    // this would be the function that I user to call my component down
}

const myComponent = (props) => {
    return(
        <View>
            <Text>Oi</Text>
        </View>
    )
}

App.js

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { showComponent } from 'my-component'

const App = () => {
    return(
        <View>
            <TouchableOpacity onPress={() => showComponent()}>
                <Text>Home</Text>
            </TouchableOpacity>
        </View>
    )
}

export defaul App

这个想法是，当调用showComponent函数时，我会显示我的组件，而当我调用hide函数时，我将关闭我的组件。

Answer 1

您可以使用单个类导出来完成此操作：

import * as React from 'react';

export default class MyComponent extends React.Component {
  state = {
    isOpen: false,
  };

  open = () => {
    this.setState({ isOpen: true });
  };

  close = () => {
    this.setState({ isOpen: true });
  };

  render() {
    const { isOpen } = this.state;

    return !isOpen ? null : (
      <View>
        <Text>Oi</Text>
      </View>
    );
  }
}

您可以像这样使用它：

<MyComponent ref={(x) => this.myComponent = x)} />

然后您像这样打开它：

this.myComponent.open();

Answer 2

我在上面的评论中看到，您想使用redux动作来调用该组件，因此您应该在单击时调用redux动作，但是要显示/隐藏的组件需要链接到redux状态变量。然后在您的jsx中，您将拥有：

        <View>
            <TouchableOpacity onPress={() => showComponent()}>
                <Text>Home</Text>
            </TouchableOpacity>
            {reduxBoolean && <MyComponent />}
        </View>

通过React Native函数调用组件

2 个答案: