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(prevState => nextState)形式的setState，因为否则modalVisible在该函数中将始终被视为true（除非有更新，否则不会更新）您使用useCallback），该函数将始终将其设置为false。这是代码setModalVisible(modalVisible => { return !modalVisible })。

从标题响应本机切换模式屏幕

1 个答案: