React Native Grid 与 Webview 崩溃答案

【问题标题】：React Native Grid with Webview crashesReact Native Grid 与 Webview 崩溃
【发布时间】：2019-09-28 12:50:36
【问题描述】：

我正在使用具有固定高度 150 的 View 的 Grid 和具有其余高度的 Row 在视图中我显示文本输入，在行中我显示 Webview 当我触摸输入时，键盘打开，如果我按下后退按钮，应用程序崩溃

如果我删除 webview 并执行相同操作，应用程序不会崩溃

<Grid>
  <View style={styles.screenView}>
    <ImageBackground
      source={size(course.image_url) > 0 ? { uri: course.image_url } : logo}
      resizeMode="cover"
      style={styles.imageBackground}
    >
      ......
    </ImageBackground>
  </View>
  <View style={styles.screenView}>
    <View style={styles.container}>
      <TextInput
        style={styles.reviewInput}
        onChangeText={addReview.bind(props)}
        placeholder="Your reviews about the course"
        value={review}
        multiline={true}
      />
    </View>
    <LoadingButton
      isLoading={isLoading}
      isFormDirty={size(review) > 0 ? false : true}
      loadingText="Saving"
      text="Save Review"
      block={true}
      color={Color.primaryText}
      loaderColor="#FFFFFF"
      textColor={styles.lightText}
      style={styles.reviewButton}
      onPress={saveReview.bind(props)}
    />
  </View>
  <Row>
    <View style={styles.scroller}>
      <WebView originWhitelist={['*']} source={{ html: courseDescription }} />
    </View>
  </Row>
</Grid>

网页视图的样式：

scroller: {
    flex: 1,
    overflow: 'hidden',
  },

【问题讨论】：

标签： react-native webview react-native-webview

【解决方案1】：

您的代码中只有一个Row 区域。这意味着整个事情。您应该单独标记该区域。

<Grid>
    <Row size={9}>
     <View> 
       ...
    </Row>
    <Row size={1}>
     <View style={styles.scroller}>
      <WebView originWhitelist={['*']} source={{ html: courseDescription }} />
    </View>
    </Row>
</Grid>

【讨论】：