React Native - 如何设置导入的 js 文件中包含的变量状态

Question

我创建了一个 Loader.js 来在模式中显示 ActivityIndicator。我在所有页面中包含 Loader.js 并在页面处理/呈现时显示它。

Loader.js

const Loader = props => {
  const {
    loading,
    ...attributes
  } = props;

  return (
    <Modal
      transparent={true}
      animationType={'slide'}
      visible={ loading }
                   onRequestClose={() => { this.setState({loading: false})}}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <ActivityIndicator
            animating={loading} />
        </View>
      </View>
    </Modal>
  )
}

export default Loader;

在我包含 Loader.js 的屏幕中，我定义了加载状态变量并显示加载器，我做了 this.setState({loading: true});

在屏幕渲染中我添加了：

      <Loader
          loading={this.state.loading} />

但有时 Loader 会挂起。我想在模式 (Loader.js) 中添加一个关闭按钮，以便为用户提供一种取消加载程序的方法。但是我无法在 Loader.js 中将加载状态设置为 false。我收到错误消息：_this.setState 不是函数。

谁能建议我怎样才能关闭加载程序？我不想修改包含 Loader.js 的屏幕，因为这需要更改多个屏幕。

非常感谢任何帮助。谢谢。

Answer 1

我也在用同样的方法。这是我的 Loader.js ：

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Modal,
    ActivityIndicator
} from 'react-native';

class Loader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: this.props.isLoading
        }
    }

    static getDerivedStateFromProps(nextProps) {
        return {
          isLoading: nextProps.isLoading
        };
    }     

    render() {
        return (
            <Modal
                transparent={true}
                animationType={'none'}
                visible={this.state.isLoading}
                style={{zIndex: 1100}}
                onRequestClose={() => { }}>
                <View style={styles.modalBackground}>
                    <View style={styles.activityIndicatorWrapper}>
                        <ActivityIndicator animating={this.state.loading} />
                    </View>
                </View>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    modalBackground: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'space-around',
        backgroundColor: '#00000040',
        zIndex: 1000
    },
    activityIndicatorWrapper: {
        backgroundColor: '#FFFFFF',
        height: 100,
        width: 100,
        borderRadius: 10,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-around'
    }
});

export default Loader

并按如下方式使用：

<Loader isLoading={this.state.isLoading} />

当您在主要组件中设置 isLoading false 时它会自动关闭。

Answer 2

简单地创建一个纯组件，如下所示：

Loader.js

import {ActivityIndicator, Modal, Text, View} from "react-native";
import React, {PureComponent} from 'react';


class Loader extends PureComponent {

static propTypes = {
        onCancel: PropTypes.func,
        isLoading : PropTypes.bool
    };


    render() {
        return <Modal
            animated={true}
            visible={this.props.isLoading}
            transparent={true}
            animationType={'fade'}>

            <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>

                <View style={{
                    width: 120, height: 40, borderRadius: 5, padding: 10, backgroundColor: 'lightcoral',
                    justifyContent: 'center', alignItems: 'center', flexDirection: 'row'
                }}>

                    <ActivityIndicator
                        color='white'
                        size={'small'}
                        animating={true}/>

                    <Text style={{padding: 8, color: 'white'}}>Loading</Text>

                </View>

                <Button title={'Cancel'} onPress={this.props.onCancel}/>

            </View>

        </Modal>;
    }


}

export default Loader

使用以下命令导入该文件并在任何 .js 中使用加载器：

import Loader from "./source/Loader";
  <Loader isLoading={this.state.isLoading} onCancel={this._cancelProgress}/>

要手动处理取消功能，您必须使用回调函数。

您必须在您的 .js 文件中定义 cancelProgress 方法来更改状态并将其传递给与上述示例相同的 loader.js 文件。

_cancelProgress = () => {
        this.setState({
            isLoading: false
        });
    }

将 isLoading 的状态更改为 true/false 以显示和隐藏 ActivityIndicator。

this.setState({isLoading: false})

React Native - 如何设置导入的 js 文件中包含的变量状态

React Native - How to set state of variable contained in the imported js file

this

setstate

react-native