【发布时间】：2021-02-22 13:41:45
【问题描述】：
这里我使用 React hooks 来打开和关闭模态，在 TouchableOpacity 上我调用函数 'handleAddClick' 来打开模态，在 no 和交叉图标调用函数 'handleClose' 来关闭模态， 但它不工作。请查看我的以下代码和帮助。在下面的代码中，我提到了完整的代码。 请推荐。
const HeaderWithPagination = (props) => {
let { headertext, totalSteps, currentStep, subHeading, cornerBG, closeButton, timeOut, disabletepIndicator } = props
const goToHome = () => {
props.navigation.dispatch(StackActions.popToTop())
}
const [addModalOpen, setAddModalOpen] = React.useState(false);
const handleAddClick = () => {
setAddModalOpen(true);
};
const handleClose = ()=>{
setAddModalOpen(false)
}
return (
<>
<View style={{flexDirection:'row',paddingHorizontal: 26, marginVertical: 40,}}>
<Modal animationIn='zoomIn' animationOut='zoomOut' transparent={true} isVisible={addModalOpen} style={{ marginVertical:'60%',marginHorizontal:'13%', backgroundColor:'#ffffff',borderRadius:20 }}>
<Icon onPress={() => {handleClose}} active name={'x-square'} style={{color:'black',alignSelf:'flex-end',fontSize:30,bottom:'10%',right:'8%',}} type="Feather"/>
<Icon active name={'alert-circle'} style={{color:'#FFD700',alignSelf:'center',fontSize:50,bottom:'8%'}} type="Feather"/>
<RegularText text={`${translate('AlertBox.gohometitle')}`} textColor='black' style={{padding:5, marginBottom: 15,textAlign:'center' ,fontWeight: 'bold'}} />
<View style={{justifyContent:'space-evenly',flexDirection:'row'}}>
<Button primary block onPress={() => {handleClose}} style = {{ borderRadius :10,backgroundColor : '#FFD700',width:'25%',alignSelf:'center',top:'10%'}}>
<Text style = {{color : 'black',alignSelf:'center',padding:50}}>
{translate('no')}
</Text>
</Button>
<Button primary block onPress={() => {goToHome}} style = {{ borderRadius :10,backgroundColor : '#FFD700',width:'25%',alignSelf:'center',top:'10%'}}>
<Text style = {{color : 'black',alignSelf:'center',}}>
{translate('yes')}
</Text>
</Button>
</View>
</Modal>
<TouchableOpacity onPress={props.back ? () => props.back() : null}
style={{paddingRight:10, }}
>
<Image source={closeButton ? COMMON_CLOSE : props.back ? BACK_BUTTON : null} style={{ height: 25, width: 16, resizeMode: "cover" }} />
</TouchableOpacity>
<View style={{flex:1, alignItems:'flex-end',}}>
<View style={{flex:1, alignItems:'flex-end',flexDirection:'row'}}>
{timeOut &&
<View style={{flexDirection: 'row', alignItems: 'center', marginRight: 15}}>
{ Platform.OS !== 'ios'?
<View>
<IconBig type="MaterialCommunityIcons" icon="progress-clock"/>
</View> :
<View>
<IconBig type="Ionicons" icon="ios-timer"/>
</View>}
<View><CountDown timer={30 * 60} that={this} OnComplete={timeOut ? () => props.timeOut() : null}/></View>
</View>
}
<TouchableOpacity style={{paddingHorizontal:10,zIndex:3 }} onPress={() =>handleAddClick }>
<IconBig icon="home" type='Feather' style={{color:'#000', textAlign:'center' }} />
</TouchableOpacity>
</View>
</View>
</View>
{/* </View> */}
<Image source={cornerBG && BG_RIGHT_CORNER}
style={{
position: "absolute",
height: 180, width: 300,
right: -110, top: -70, resizeMode: "contain"
}} />
<View style={{ paddingHorizontal: 26 }}>
{headertext &&
<Text style={{ fontFamily: 'MTNBrighterSans-Bold', fontSize: 34, color: "#454F63" }}>
{headertext}
</Text>}
{!disabletepIndicator &&<StepIndicator
currentStep={currentStep}
totalSteps={totalSteps}
/>}
{subHeading && <Text style={{
color: '#6E6E6E', fontSize: 24, fontFamily: 'Montserrat-Light', fontWeight: '100',
paddingVertical: 17.5
}}>
{subHeading}</Text>}
</View>
</>
)
}
export default HeaderWithPagination
【问题讨论】：
标签： javascript reactjs react-native react-hooks