переключить модальный экран из заголовка реагировать на родной - PullRequest
Новая
       33

переключить модальный экран из заголовка реагировать на родной

0 голосов
/ 09 марта 2020

Привет, я хочу переключить прозрачный модальный экран с кнопки заголовка, я использую хуки

Вот мой компонент стека 

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} />
  )
}

Я пытаюсь передать функцию из родительского компонента в дочерний / или обратный, но все равно не работает. Цель похожа на использование значка имени пользователя, чтобы открыть модальный экран для получения некоторой информации, и нажмите еще раз, чтобы закрыть модальный экран, с той же кнопкой. Спасибо!!

1 Ответ

0 голосов
/ 09 марта 2020

Во-первых, ToggleModal={()=>ToggleModal} это на самом деле не вызовет функцию ToggleModal. Вместо этого вы должны написать ToggleModal={() => ToggleModal()} или просто ToggleModal={ToggleModal}.

Во-вторых, вам не нужно передавать ({ ToggleModal }) => {...} в качестве аргумента. ToggleModal функция уже определена и видима.

Наконец, вам нужно использовать setState(prevState => nextState) форму setState, потому что в противном случае modalVisible всегда будет рассматриваться как true в этой функции (она выиграла не обновлять, если вы не используете useCallback), и функция всегда будет устанавливать его на false. Вот код setModalVisible(modalVisible => { return !modalVisible }).

...