[英]Is there any chance to use a component as a global ActivityIndicator on React-Native
Is there any chance to use a component as a global ActivityIndicator which has transparent color and had been created by me on React-Native? 是否有机会将组件用作具有透明颜色并由我在React-Native上创建的全局ActivityIndicator ?
Details: 细节:
ActivityIndicator
component with name ActIndicator
. ActIndicator
的ActivityIndicator
组件。 App
component that contains the app. App
组件。 Root
component that wraps the ActIndicator
and App
components. ActIndicator
和App
组件的Root
组件。 The ultimate code of render
method of Root
component looks like the following: Root
组件的render
方法的最终代码如下所示:
render() {
if (this.state.showActivityIndicator) {
return(
<ActIndicator>
<App />
</ActIndicator>
)
}
return (</App>)
}
I've tried several methods but I can not be successful. 我尝试了几种方法,但无法成功。
I guess my brain is stopped. 我想我的大脑停了下来。
I also guess there may be a logic mistake. 我还猜测可能存在逻辑错误。
I don't think you're supposed to pass App as a child, the way I use it is more like this: 我认为您不应该在小时候就通过App,我使用它的方式更像是这样:
render() {
if (this.state.showActivityIndicator) {
return(
<View>
<ActivityIndicator />
<App />
</View>
)
}
return (<App />)
}
but it would probably be better to set it up like this: 但最好像这样进行设置:
render() {
return (
<View>
<ActivityIndicator animating={this.state.showActivityIndicator} />
<App />
</View>
)
}
const withLoadingOverlay = (Component) => class withLoadingOverlayView extends React.Component { props: withLoadingOverlayProps
// Indicator view styles loadingOverlay = (style) => (
<View style={[style, styles.someDefaultStyles]}>
<ActivityIndicator color={someColor} size="large" />
</View> )
render() {
const { pending, ...passProps } = this.props;
const { width, height } = Dimensions.get('window');
return (
<View style={{ flex: 1 }}>
<Component {...passProps} />
{pending && this.loadingOverlay({ width, height })}
</View>
); } };
I used to wrap whole container with HOC and with redux action to set on start pending prop true and on success or fail to set on false so this prop will be consumed by HOC and indicator will be displayed only when pending is set on true. 我曾经用HOC和redux操作包装整个容器,以在启动未决道具设置为true时设置成功,否则将其设置为false,因此该道具将被HOC占用,并且仅当未决设置为true时才会显示指示器。
In container you have to wrap component in connect 在容器中,您必须在连接中包装组件
export default connect(
(state) => ({
pending: state.reducer.pending, // pending prop should be here
}),
(dispatch) => ({ dispatching redux actions })
)(withLoadingOverlay(WrappedComponent));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.