我正在一个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
的类组件中导入功能组件的解决方案?
答案 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>
);
}
}