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

【问题标题】：Webview not working in react-native-element OverlayWebview 在 react-native-element Overlay 中不起作用
【发布时间】：2020-02-03 06:33:50
【问题描述】：

我将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>

  )
}

【问题讨论】：

标签： reactjs react-native react-native-elements

【解决方案1】：

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

为了解决这个问题，我使用react-native-elements Overlay 组件和WebView 创建了一个Snack。为了简洁起见，我使用了您的一些代码并删除了所有冗余代码。

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

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

【讨论】：