Веб-просмотр не работает в оверлее с реагирующим нативным элементом - PullRequest
Новая
       25

Веб-просмотр не работает в оверлее с реагирующим нативным элементом

0 голосов
/ 03 февраля 2020

Я использую act-native-element для готовых компонентов в моем приложении и использую Overlay , чтобы показывать модалы во всем приложении. Теперь проблема в том, что у меня есть модал, в котором я хочу показать Webview, но он не отображается на экране. Мой модальный код выглядит следующим образом 

export const Modal = ({ visible, showCrossBtn, setModalVisible, backgroundColor, children }) => {

    return (
        <Overlay
            isVisible={visible}
            fullScreen={false}
            height="auto"
            overlayBackgroundColor={backgroundColor}
            overlayStyle={styles.overlay}
            onBackdropPress={() => setModalVisible(false)}>
            <View style={styles.dialogBox}>
                {
                    showCrossBtn && <TouchableOpacity style={[styles.crossPosition, styles.crossStyling]} onPress={() => setModalVisible(false)}>
                        <Icon name="cross" type="entypo" color={colors.gray} size={30} />
                    </TouchableOpacity>
                }

                <View style={styles.body}>
                    {children}
                </View>
            </View>
        </Overlay>
    )
}

В моем базовом c компонент 

export const Home = ({ }) => {
  return (
    ....
    ....
    <Modal
      visible={this.props.visible}
      setModalVisible={this.props.setModalVisible}
      backgroundColor={colors.lightgray}
      showCrossBtn={false}
      >
      <WebView
                style={[{ height: 20 }, styles.webView]}
                originWhitelist={['*']}
                ref={e => webview = e}
                source={{ html: '<p>HELLO WORLD</p>'}} />
    </Modal>

  )
}

1 Ответ

0 голосов
/ 03 февраля 2020

Использование WebView в модальности может быть сложным из-за высоты и ширины.

Чтобы решить эту проблему, я создал Snack , используя react-native-elements Overlay компонент и WebView. Я использовал часть вашего кода и удалил любой избыточный код для краткости.

Используйте симулятор iOS или Android для запуска перекуса. Вы также можете использовать свое физическое устройство для запуска закусок с помощью приложения expo.

Закуска - https://snack.expo.io/r1H4FSHML

...