如何在React Native中将功能组件的方法用于类组件?

时间:2020-02-21 17:35:03

标签: react-native

我正在一个React Native项目中工作,我想使它成为显示加载指示器的公共组件(以通知用户等待过程完成)。

为此,我制作了一个项目通用的js文件 如下所示:

Loader.JS react native

中的常用功能组件
import React, {useState} from 'react';
import {View, StyleSheet, ActivityIndicator} from 'react-native';
import {loaderColor} from './app.constants';

const Loader = () => {
  return (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size="large" color={loaderColor} />
    </View>
  );
};

const UseLoader = () => {
  const [visible, setVisible] = useState(true);
  const showLoader = () => setVisible(true);
  const hideLoader = () => setVisible(false);
  const loader = visible ? <Loader /> : null;
  return [loader, showLoader, hideLoader];
};

const styles = StyleSheet.create({
  loadingContainer: {
    backgroundColor: 'red',
    flex: 1,
    position: 'absolute',
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 100,
    padding: 10,
  },
});

export default UseLoader;

我的类组件如下所示:

import React, {Component} from 'react';
import {View} from 'react-native';
// import {UseLoader} from '../UseLoader';
import '../UseLoader';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    [loader, showLoader , hideLoader] = UseLoader;
    this.callApi()
  }

  callApi() {
      ...
  }

  render() {
    return (
        <View style={styles.body}>
          {loader}
        </View>

    );
  }
}

我试图以两种方式导入功能组件,但未能使用它。

是否可以在react native的类组件中导入功能组件的解决方案?

2 个答案:

答案 0 :(得分:1)

您可以使用它。

您可以将引用添加到子组件:

<loader ref='loader' {...this.props} />

然后像这样调用子级上的方法:

<Button onPress={this.refs.loader.myfunc} />

功能相同,但是我们没有使用String来引用组件,而是将其存储在全局变量中。

<loader ref={loader => {this.loader = loader}} {...this.props} />
<Button onPress={this.loader.myfunc} />

答案 1 :(得分:0)

如果要使其通用,请更改类组件的状态,无论是否可见,将其发送到该组件,如下所示:

    const Loader = (props) => {
if(props.show){
      return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={loaderColor} />
        </View>
      );
}else{
   return null;
}
    };

以及您的班级组成部分

import React, {Component} from 'react';
import {View} from 'react-native';
// import {UseLoader} from '../UseLoader';
import '../UseLoader';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
       this.setState({showLoading:true});
    this.callApi()
  }

  callApi() {
      ...
  }

  render() {
    return (
        <View style={styles.body}>
          <loader show={this.state.showLoading} />
        </View>

    );
  }
}