时间戳

首页 > 解决方案 > Webview 在 react-native-element Overlay 中不起作用

reactjs - Webview 在 react-native-element Overlay 中不起作用

问题描述

我将react-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>
    )
}

在我的基本组件中

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>

  )
}

标签： reactjsreact-nativereact-native-elements

解决方案

WebView由于高度和宽度，在模态中使用可能会很棘手。

为了解决这个问题，我使用Overlayreact-native-elements 组件和WebView. 为了简洁起见，我使用了您的一些代码并删除了任何冗余代码。

使用 iOS 或 Android 模拟器运行点心。您还可以使用您的物理设备使用 expo 应用程序运行小吃。

小吃 - https://snack.expo.io/r1H4FSHML

推荐阅读