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

Question

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

因此，我感谢您提出的所有建议。谢谢

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

Answer 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的视图的高度。 希望，你有主意吗？

Answer 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>
    );
  }
}