Применение широкого модального в React Native - PullRequest
Новая
       26

Применение широкого модального в React Native

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

В настоящее время я использую реагирует на нативный модал , и он служит для показа модальных мод.

Моя проблема в настоящее время заключается в том, что я хочу показать модальное приложение в широком диапазоне. Например, когда получено уведомление pu sh, я хочу вызвать модал независимо от того, на каком экране находится пользователь. Текущий дизайн модалов привязывает его к одному экрану.

Как это можно преодолеть?

1 Ответ

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

прежде всего создайте контекст вашего модального 

const BottomModal = React.createContext();

, затем предоставьте ваш модальный с использованием провайдера реагирующего контекста 




export const BottomModalProvider = ({children}) => {
  const panelRef = useRef();
  const _show = useCallback((data, type) => {
    panelRef.current.show();
  }, []);

  const _hide = useCallback(() => {
    panelRef.current.hide();
  }, []);



  const value = useMemo(() => {
    return {
      _show,
      _hide,
    };
  }, [_hide, _show]);

  return (
    <BottomPanelContext.Provider value={value}>
      {children}
      <BottomPanel fixed ref={panelRef} />
    </BottomPanelContext.Provider>
  );
};

вот код для нижней панели 


function BottomPanel(props, ref) {
  const {fixed} = props;
  const [visible, setVisibility] = useState(false);

  const _hide = () => {
    !fixed && hideModal();
  };

  const hideModal = () => {
    setVisibility(false);
  };

  useImperativeHandle(ref, () => ({
    show: () => {
      setVisibility(true);
    },
    hide: () => {
      hideModal();
    },
  }));

  return (
    <Modal
      // swipeDirection={["down"]}
      hideModalContentWhileAnimating
      isVisible={visible}
      avoidKeyboard={true}
      swipeThreshold={100}
      onSwipeComplete={() => _hide()}
      onBackButtonPress={() => _hide()}
      useNativeDriver={true}
      style={{
        justifyContent: 'flex-end',
        margin: 0,
      }}>
      <Container style={[{flex: 0.9}]}>
        {!fixed ? (
          <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
            <Button
              style={{marginBottom: 10}}
              color={'white'}
              onPress={() => setVisibility(false)}>
              OK
            </Button>
          </View>
        ) : null}
        {props.renderContent && props.renderContent()}
      </Container>
    </Modal>
  );
}

BottomPanel = forwardRef(BottomPanel);

export default BottomPanel;

, затем оберните ваше приложение с помощью провайдера 

...
  <BottomModalProvider>
          <NavigationContainer screenProps={screenProps} theme={theme} />
  </BottomModalProvider>
...

и, наконец, как показать или скрыть модальный режим, предоставьте пользовательский хук 

const useBottomPanel = props => {
  return useContext(BottomPanelContext);
};

используйте его в любом месте приложения, например 


  const {_show, _hide} = useBottomModal();
   //....
   openModal=()=> {
     _show(); 
   }
  //...

Если вы не используете хуки или компоненты класса, вы можете легко конвертировать хуки с контекстом класса

https://reactjs.org/docs/context.html#reactcreatecontext

таким образом, вы можете добиться только показом Модальный изнутри компонентов другой способ - сохранить ссылку на панель в любом месте и использовать эту ссылку, чтобы показать скрытие от некомпонентных файлов, таких как редукция или случаи уведомлений.

...