2017-09-06 65 views
0

我創建了一個組件調用微調這樣:在這個組件微調不工作

//spinner.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}); 
} 
} 

創建方法_show()和_hide()

但沒有當我從其他班級打電話時,我從班級Login.js致電

class Login extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { visible: false }; 
    } 

_onLoginPress() { 
     this.Spinner._show() 
      ) 
    } 

_redirect() { 
     this.Spinner._hide() 
    } 
     render() { 
       return (
     <Spinner visible= {this.state.visible}/> 
     <TouchableHighlight style={styles.button} 
        onPress={this._onLoginPress} 
        activeOpacity={1} > 
      <Text style={styles.textButtonLogin}>Visible</Text> 
      </TouchableHighlight> 

      <TouchableHighlight style={styles.button} 
        onPress={this._redirect} 
        activeOpacity={1} > 
      <Text style={styles.textButtonLogin}>Not Visible</Text> 
      </TouchableHighlight> 

) 
} 

當在構造函數中設置true時,如果顯示,但在構造函數中設置爲false時,它不顯示,它可以顯示何時按下按鈕_onLoginPress,而不顯示何時按下按鈕_redirect()。

+0

爲什麼不直接將「可見」道具傳遞給Spinner組件中的模態,並且在Login組件中更新可見狀態而不是調用show和hide?通常情況下最好避免在可以使用時使用ref,而使用state和peops。 –

回答

1

對於正確使用<Spinner />參考,你必須

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

然後你this.Spinner._show()this.Spinner._hide()應該工作。