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