React Native - ScrollView 中的 WebView 和 FlatList 可滚动答案

【问题标题】：React Native - WebView & FlatList in a ScrollView to be scrollableReact Native - ScrollView 中的 WebView 和 FlatList 可滚动
【发布时间】：2018-12-13 14:40:57
【问题描述】：

我在 react native 中制作视图，但我的组件有一个 webview 来显示 HTML，webview 下面是一个平面列表（项目列表）父组件应该可以基于 webview 和 flatlist 滚动。我试图将它们放在一起，但它没有按我的意愿工作。

因此，我将不胜感激您的所有意见和建议。谢谢

更新： 更新库的所有者后，我在这里找到了解决方案 https://github.com/iou90/react-native-autoheight-webview/issues/81

【问题讨论】：

标签： react-native react-native-flatlist react-native-scrollview

【解决方案1】：

您可以将WebView 用作FlatList 的标头组件，如下所示：

 <View style={styles.container}>
    <FlatList
      data={[
        { key: 'a' },
        { key: 'b' },
        { key: 'c' },
        { key: 'd' },

      ]}
      renderItem={({ item }) => <Text>{item.key}</Text>}
      ListHeaderComponent={
        <View style={{ height: 200 }}>
          <WebView
            originWhitelist={['*']}
            source={{ html: '<h1>Hello world</h1>' }}
          />
        </View>
      }
    />
  </View>

但是仍然有一个限制，你必须像上面那样指定包裹WebView 的视图的高度。希望，你明白了吗？

【讨论】：

感谢 Roshan Gautam 对我的支持。你知道如何根据渲染后的内容来测量 webview 的高度吗？我的想法是 webview 会动态改变它的高度
您可以在 HTML 本身中指定自定义高度。而且，即使你给包装 WebView 的视图指定高度，你也可以独立滚动 WebView 来查看内容。
另外，您可以为包装 WebView 的 View 提供所需的最小高度。如果这解决了您最初的问题，请支持我的回答。 :)
另一种解决方法，使用尺寸获取设备的高度，并使用它为视图提供所需的高度。
我在上面的更新部分找到了解决方案。感谢您的一票建议

【解决方案2】：

也许这会有所帮助。

import React, { Component } from 'react';
import { Text, View, StyleSheet, WebView, FlatList } from 'react-native';

export default class App extends Component {
  onNavigationStateChange = navState => {
    if (navState.url.indexOf('https://www.google.com') === 0) {
      const regex = /#access_token=(.+)/;
      let accessToken = navState.url.match(regex)[1];
      console.log(accessToken);
    }
  };
  render() {
    const url = 'https://api.instagram.com/oauth/authorize/?client_id={CLIENT_ID}e&redirect_uri=https://www.google.com&response_type=token';
    return (
      <View style={{flex: 1}}>
      <WebView
        source={{
          uri: url,
        }}

        scalesPageToFit
        javaScriptEnabled
        style={{ flex: 1 }}
      />
      <FlatList data={[1, 2, 3]} renderItem={(item) => <Text>item</Text>}/>
      </View>
    );
  }
}

【讨论】：

谢谢你的建议.. 但这无济于事，因为 Webview 高度只是一个轴，其余的是 FlatList 空间，View 高度不是 WebView 的高度 + FlatList 的高度
你想要达到的目标是不可能的。我觉得这个github issue 很有趣。看看这个。快乐编码:)