从标头react native切换模式屏幕

Question

嗨，我想从标题按钮切换一个透明的模式屏幕，我使用挂钩

这是我的堆叠组件

function MyStack(props) {
const [modalvisble, setModalvisble] = useState(false)
ToggleModal = () => {
console.log(modalvisble)
setModalvisble(!modalvisble)
}
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="MyTabs"
screenOptions={{
header: ({ ToggleModal }) => {
return (
<Header
ToggleModal={()=>ToggleModal} 
/>
)
},
cardStyle: { backgroundColor: 'rgba(52, 52, 52, 0.8)',},
cardStyleInterpolator: ({ current: { progress } }) => ({
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.25, 0.7, 1],
}),
overlayStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, .5],
extrapolate: 'identity',
})
}
}
})
}}
mode='modal'
>
<Stack.Screen
name="MyTabs"
component={MyTabs}
options={{
}}
/>
<Stack.Screen name="ModalScreen" component={ModalBar} modalvisble={modalvisble} />
</Stack.Navigator>
</NavigationContainer>
);
}

标题组件

function Header({ ToggleModal }) {
//const navigation = useNavigation();
// const toggleIsFocused = () => {
//   selected ? navigation.navigate('Mytab') : navigation.navigate('ModalScreen')
//   return toggleSelected;
//  }
return (
<View>
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 30, marginRight: 20, }}>
<Text style={{ color: 'white', margin: 10, fontSize: 13 }}>User Name</Text>
<TouchableOpacity
//onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}            
onPress={ ToggleModal}
/>
</View>         
</View>
)
}
export default Header;

模式屏幕

function ModalBar({modalvisble}) {
return (
<Modal style={{ flex: 1, }} visible={modalvisble} />
)
}

我试图将函数从父组件传递到子组件/或反向组件，但仍然无法工作。目标就像使用用户名图标打开模式屏幕以获取一些信息，然后再次按下以关闭模式屏幕，使用相同的按钮。谢谢

Answer 1

首先，ToggleModal={()=>ToggleModal}这实际上不会调用ToggleModal函数。相反，您应该编写ToggleModal={() => ToggleModal()}，或者只编写ToggleModal={ToggleModal}。

其次，您不需要将({ ToggleModal }) => {...}作为参数传递。ToggleModal函数已定义且可见。

最后，您需要使用setState的setState(prevState => nextState)形式，因为否则modalVisible在该函数中将始终被视为true(除非您使用useCallback，否则它不会更新(，并且该函数将始终将其设置为false。这是代码setModalVisible(modalVisible => { return !modalVisible })。