Phản hồi gốc: Có thể có chiều cao của nội dung html trong chế độ xem web không?

Tôi nhận nội dung html từ api và tôi muốn hiển thị nội dung đó dưới dạng chế độ xem web trong ứng dụng của tôi.Phản hồi gốc: Có thể có chiều cao của nội dung html trong chế độ xem web không?

Thành phần webview được lồng trong một scrollview bởi vì nó có một số nội dung khác trên làm cho chức năng của tôi là một cái gì đó như thế này:

render() { 
 
     var html = '<!DOCTYPE html><html><body>' + this.state.pushEvent.Description + '</body></html>'; 
 

 
    return (
 
     <ScrollView> 
 
     <View style={styles.recipe}> 
 
      <Image source={{uri: this.state.pushEvent.ImageUrl}} 
 
      style={styles.imgFull} /> 
 
      <Text style={styles.title}>{this.state.pushEvent.Title}</Text> 
 
      
 
      <WebView style={{padding: 20}} 
 
      automaticallyAdjustContentInsets={false} 
 
      scrollEnabled={false} 
 
      html={html}> 
 
      </WebView> 
 
     </View> 
 
     </ScrollView> 
 
    ); 
 
    }

Vấn đề là html của tôi chỉ là 20pt cao đó là đệm của tôi. Có một cách thông minh để có được chiều cao của nội dung?

Nguồn

2015-10-05 daniele bertella

Tôi đã sử dụng @hedgerwang hack để cho WebView của tôi giao tiếp thông qua document.title chiều cao của nó, đây là [link] (https://github.com/facebook/react-native/issues/586#issuecomment-90826117) nhưng phải có cách tốt hơn mà không cần cài đặt npm bên ngoài –

Như tôi đã viết trên bình luận ở trên đây là những gì tôi đã đưa ra, nhưng tôi vẫn nghĩ rằng cần có một giải pháp tốt hơn.

Dưới đây là vấn đề trên github Tôi lấy cảm hứng từ: @hedgerwang answer

Trong var html của tôi Tôi đã thêm một kịch bản đơn giản ngay trước thẻ cơ đóng cửa, tôi chỉ cần lưu đỉnh cao của html của tôi trong tiêu đề tài liệu của tôi:

<script>window.location.hash = 1;document.title = document.height;</script>

sau đó tôi đã thêm vàoNavigationStateChange đạo cụ trong thành phần WebView của tôi với gọi lại đặt biến trạng thái "chiều cao" và sau đó đặt chiều cao này thành WebView của tôi. Như tôi đã nói, điều đó đã làm một mẹo, chỉ với một chút flahsing trong khi thay đổi nội dung trong WebView, nhưng tôi nghĩ rằng đó là một hack bẩn.

Cuối cùng tôi quyết định thay đổi api để có một cái gì đó mà tôi không cần phải bao gồm trong một WebView

Nhưng có lẽ điều này có thể giúp đỡ, ở đây đầy đủ mã.

onNavigationStateChange(navState) { 
    this.setState({ 
    height: navState.title, 
    }); 
} 
render() { 
    var html = '<!DOCTYPE html><html><body>' + this.state.pushEvent.Description + '<script>window.location.hash = 1;document.title = document.height;</script></body></html>'; 
return (
    <ScrollView> 
    <View style={styles.recipe}> 
     <Image source={{uri: this.state.pushEvent.ImageUrl}} 
     style={styles.imgFull} /> 
     <Text style={styles.title}>{this.state.pushEvent.Title}</Text> 

     <WebView style={{padding: 20}} 
     automaticallyAdjustContentInsets={false} 
     scrollEnabled={false} 
     onNavigationStateChange={this.onNavigationStateChange.bind(this)} 
     html={html}> 
     </WebView> 
    </View> 
    </ScrollView> 
); 
}

Nguồn

2015-10-08 10:01:20

Cảm ơn. Tôi đã thực hiện nó như thế này https://gist.github.com/epeli/10c77c1710dd137a1335 Phiên bản này cũng sẽ xử lý hình ảnh nhưng vẫn không thành công cho bất kỳ nội dung động nào khác. – Epeli

Điều này dường như không còn hoạt động (RN 0,28) - như các bình luận cho câu trả lời của Daniel dưới đây cho biết (tiêm JavaScript), thuộc tính navState.title bây giờ có vẻ to lớn ... cho một dòng văn bản, giá trị là 568 cho tôi ... – user

Điều này không hoạt động trong Phiên bản gốc phản ứng 0.30 Chiều cao luôn luôn là 0. Và tôi nghĩ rằng nó sẽ thay đổi việc nhập một cái gì đó như thế này. nhập Phản hồi, {Thành phần} từ 'phản ứng'; nhập {WebView, Xem, Văn bản} từ "phản ứng gốc"; –

Có một cách tốt hơn để làm điều đó: bạn có thể tùy chỉnh tiêm JS với injectedJavaScript tài sản. Kết quả của việc đánh giá sẽ kết thúc trong đối tượng sự kiện bạn nhận được trong số trênNavigationStateChange của mình. Bằng cách này, bạn sẽ không phải sửa đổi chính HTML hoặc chiếm đoạt thuộc tính tiêu đề.

Xem https://gist.github.com/dbasedow/ed6e099823cb8d5ab30e để biết ví dụ

Nguồn

2016-01-13 20:40:33

Điều này tốt hơn rất nhiều và gọn gàng –

Thành phần này hoạt động hoàn hảo cho tôi. Nó điều chỉnh webview để phù hợp với nội dung và trả về chiều cao của html được hiển thị.

https://gist.github.com/epeli/10c77c1710dd137a1335

Và thay đổi

import React, {WebView, View, Text} from "react-native";

cho

import React from "react"; 
import {WebView, View, Text} from "react-native";

ở phía trên cùng của tập tin.

Nguồn

2017-07-10 01:32:11

Phản hồi gốc: Có thể có chiều cao của nội dung html trong chế độ xem web không?

Trả lời

Các vấn đề liên quan