2017-09-06 7 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に設定されている場合はshowですが、コンストラクタでfalseが設定されている場合は表示されません。_onLoginPressボタンを押すと表示され、_redirect()ボタンが押されたときは表示されません。正しく<Spinner />リファレンスを使用するための

+0

Spinnerコンポーネントのモーダルに 'visible'小道具を直接渡していないのですが、ログインコンポーネントでは、showとhideを呼び出すのではなく、可視状態を更新するのはなぜですか?通常は、refやrefを使用することは避けてください。 –

答えて

1

、あなたは

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

に持っている。そして、あなたのthis.Spinner._show()this.Spinner._hide()は動作するはずです。

関連する問題