这里我使用 React 钩子来打开和关闭模态，在 TouchableOpacity 上我调用 fucntion 'handleAddClick' 来打开 modala nd on no 和 cross icon 调用函数 'handleClose' 来关闭 modal ， 但它不工作。请查看我下面的代码并提供帮助。在下面的代码中，我提到了我的完整代码。 请建议。
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
答案 0 :(得分：1)
您定义了函数但没有正确调用它
改变这个
onPress={() => {handleClose}}
至此
onPress={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;