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

Question

我在我的应用程序中将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>

  )
}

Answer 1

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

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

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

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