Javascript 如何使用react钩子react native在功能组件中打开和关闭模态
在这里，我使用React钩子打开和关闭模式，在TouchableOpacity上，我调用函数“HandLeadClick”打开模式，在no和cross图标上，调用函数“handleClose”关闭模式， 但它不起作用。请查看我下面的代码和帮助。在下面的代码中，我有完整的代码。 请把它拿出来Javascript 如何使用react钩子react native在功能组件中打开和关闭模态,javascript,reactjs,react-native,react-hooks,Javascript,Reactjs,React Native,React Hooks,在这里，我使用React钩子打开和关闭模式，在TouchableOpacity上，我调用函数“HandLeadClick”打开模式，在no和cross图标上，调用函数“handleClose”关闭模式， 但它不起作用。请查看我下面的代码和帮助。在下面的代码中，我有完整的代码。 请把它拿出来 const HeaderWithPagination = (props) => { let { headertext, totalSteps, currentStep, subHeadin
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
const HeaderWithPagination=（道具）=>{
设{headertext，totalSteps，currentStep，subHeading，cornerBG，closeButton，timeOut，disabletepIndicator}=props
常数goToHome=（）=>{
props.navigation.dispatch（StackActions.poptoop（））
}
常量[addModalOpen，setAddModalOpen]=React.useState（false）；
const handleAddClick=（）=>{
setAddModalOpen（真）；
};
常量handleClose=（）=>{
setAddModalOpen（错误）
}
返回(
{handleClose}活动名称={'x-square'}样式={{{color:'black'，alignSelf:'flex-end'，fontSize:30，底部：'10%，右侧：'8%，}type=“Feather”/
{handleClose}style={{borderRadius:10，backgroundColor:'FFD700'，width:'25%'，alignSelf:'center'，top:'10%}>
{translate（'no'）}
{goToHome}style={{borderRadius:10，backgroundColor:'FFD700'，宽度：'25%，alignSelf:'center'，top:'10%}>
{翻译（'yes'）}
props.back（）：null}
style={{paddingRight:10，}}
>
{超时&&
{Platform.OS！=='ios'？
:
}
props.timeOut（）：null}/>
}
HandLeadClick}>
{/* */}
{headertext&&
{headertext}
}
{！disabletepIndicator&&}
{副标题&&
{子目}
)
}
导出带有分页的默认标题
onPress={() => {handleClose}}
onPress={handleClose}
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;
const HeaderWithPagination=（道具）=>{
让{
标题文字，
总体步骤，
当前步骤，
副标题，
cornerBG，
关闭按钮，
超时，
禁用指示灯，
}=道具；
常数goToHome=（）=>{
props.navigation.dispatch（StackActions.poptoop（））；
};
常量[addModalOpen，setAddModalOpen]=React.useState（false）；
const handleAddClick=（）=>{
setAddModalOpen（真）；
};
常量handleClose=（）=>{
setAddModalOpen（假）；
};
返回(
{translate（'no'）}
{翻译（'yes'）}
props.back（）：null}
样式={{paddingRight:10}}>
{超时&&(
{Platform.OS！=='ios'(
) : (
)}
props.timeOut（）：null}
/>
)}
{/* */}
{headertext&&(
{headertext}
)}
{！disabletepIndicator&&(
)}
{副标题&&(
{子目}
)}
);
};
导出带有分页的默认标题；