React Native - Как установить состояние переменной, содержащейся в импортированном js-файле - PullRequest
Новая
       10

React Native - Как установить состояние переменной, содержащейся в импортированном js-файле

0 голосов
/ 24 сентября 2019

Я создал 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, я определил переменную состояния загрузки, и чтобы показать загрузчику, я делаю это. SetState ({loading: true});

И в рендеринг экрана я добавил: 

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

Но иногда зависает Загрузчик.Я хочу добавить кнопку «Закрыть» в модальном режиме (Loader.js), чтобы предоставить пользователю возможность отменить загрузчик.Но я не могу установить состояние загрузки в false внутри Loader.js.Я получаю сообщение об ошибке: _this.setState не является функцией.

Кто-нибудь может подсказать, как мне добиться закрытия загрузчика?Я не хочу изменять экраны, в которые включен Loader.js, поскольку это потребует смены нескольких экранов.

Любая помощь очень ценится.Спасибо.

Ответы [ 2 ]

0 голосов
/ 24 сентября 2019

Просто создайте чистый компонент, как показано ниже:

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}/>

Чтобы вручную обрабатывать функцию отмены, вы должны использовать функцию обратного вызова.

вы должны определить метод cancelProgress в вашем файле .js, чтобы изменить состояние и передать его в файл loader.jsаналогично приведенному выше примеру. 

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

Измените состояние isLoading на true / false, чтобы показать и скрыть ActivityIndicator. 

this.setState({isLoading: false})
.
0 голосов
/ 24 сентября 2019

Я тоже использую тот же подход.Вот мой 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 в своем основном компоненте.

...