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 />
リファレンスを使用するための
Spinnerコンポーネントのモーダルに 'visible'小道具を直接渡していないのですが、ログインコンポーネントでは、showとhideを呼び出すのではなく、可視状態を更新するのはなぜですか?通常は、refやrefを使用することは避けてください。 –