React Native - WebView & FlatList в ScrollView для прокрутки - PullRequest
Новая
       34

React Native - WebView & FlatList в ScrollView для прокрутки

0 голосов
/ 13 декабря 2018

Я делаю представление в собственном режиме, но у моего компонента есть веб-просмотр для отображения HTML, ниже веб-просмотра - плоский список (список элементов). Предполагается, что родительский компонент можно прокручивать на основе веб-просмотра и плоского списка.Я пытался соединить их, но это не работает так, как я хочу.

Поэтому я был бы признателен за все ваши советы и предложения.Спасибо

enter image description here

Обновлено: Я нашел решение здесь после обновления владельца библиотеки https://github.com/iou90/react-native-autoheight-webview/issues/81

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Вы можете использовать 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как сделано выше.Надеюсь, у вас есть идея?

0 голосов
/ 13 декабря 2018

Может быть, это поможет. 

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