组件微调器不工作

时间:2017-09-06 02:38:27

标签: react-native progress-bar components

我创建一个组件调用Spinner所以:

// spinner.js

int nameSize

在这个创建方法_show()和_hide()

但是从其他类调用时没有工作,我从类Login.js调用

import React, { Component } from 'react';

import {
    Image,
    StyleSheet,
    View,
    Text,
    KeyboardAvoidingView,
    TouchableHighlight,
    Modal,
    Button,
    ActivityIndicator,
} from 'react-native';

export default class Spinner extends Component{

constructor(props){
    super(props);
    this.state={
        visible:this.props.visible
    };
    this._show=this._show.bind(this);
    this._hide=this._hide.bind(this);
}

render(){
    return(
        <Modal
            animationType={'none'}
            transparent={true}
            visible={this.state.visible}
            onRequestClose={this.props.onDismissLoadingCallback}>
            <View style={{flex:1}}/>
            <View style={{
                height:80,
                width:80,
                alignItems:'center',
                justifyContent:'center',
                backgroundColor:'#3434347f',
                borderRadius:10,alignSelf:'center'}}>
                <ActivityIndicator
                    animating={true}
                    size={"large"}
                    color={'white'}
                />
            </View>
            <View style={{flex:1}}/>
        </Modal>
    );
}
_show() {
this.setState({visible:true});
}

_hide(){
this.setState({visible:false});
}
}

当在构造函数中设置为true时,如果显示,但是当在构造函数中设置为false时它不显示,它可以在按下按钮_onLoginPress时显示,而不显示何时按下按钮_redirect()。

1 个答案:

答案 0 :(得分:1)

要正确使用<Spinner />引用,您必须

<Spinner ref={(ref) => this.Spinner = ref} visible= {this.state.visible} />

然后您的this.Spinner._show()this.Spinner._hide()应该有效。