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

Question

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

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

更新： 在库的所有者更新后，我在这里找到了解决方案 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>
    );
  }
}