Hướng dẫn react native render html read more - phản ứng gốc kết xuất html đọc thêm

Tôi đang sử dụng gói HTML kết xuất phản ứng. Tôi biết đọc nhiều hơn và ít công việc gói chỉ cho văn bản. Vì vậy, có bất kỳ cách nào để đạt được giải pháp để hiển thị nội dung HTML với đọc nhiều hơn và ít hành vi

hỏi ngày 13 tháng 2 năm 2019 lúc 10:50Feb 13, 2019 at 10:50

Hướng dẫn react native render html read more - phản ứng gốc kết xuất html đọc thêm

Bạn có thể dễ dàng kết hợp hai gói này. Bạn có thể sử dụng gói react-native-read-more-text để đọc nhiều hơn/ít hơn và sử dụng react-native-view-more-text để hiển thị bất kỳ nội dung HTML nào.

Ví dụ:

import HTML from 'react-native-render-html';
import ViewMoreText from 'react-native-view-more-text';

const htmlContent = `
                

This HTML snippet is now rendered with native components !

Enjoy a webview-free and blazing fast application

Enjoy, This is a test 1

Enjoy, This is a test 2

Enjoy, This is a test 3

Look at how happy this native cat is `; export default class Demo extends Component { renderViewMore(onPress){ return( View more ) } renderViewLess(onPress){ return( View less ) } render() { return ( HTML html = {htmlContent} imagesMaxWidth = {Dimensions.get('window').width} /> ); } }

Bạn có thể dễ dàng cung cấp số lượng dòng trong trường hợp hiển thị ít văn bản bằng thuộc tính numberOfLines, hiện là 3 dòng.

Dưới đây là các liên kết của các gói:

https://www.npmjs.com/package/react-native-view-more-text

https://github.com/archriss/react-native-render-html

Tôi hy vọng tôi có thể giúp đỡ :)

Đã trả lời ngày 13 tháng 2 năm 2019 lúc 11:13Feb 13, 2019 at 11:13

Hướng dẫn react native render html read more - phản ứng gốc kết xuất html đọc thêm

SaeidsaeidSaeid

1.9464 Huy hiệu vàng27 Huy hiệu bạc43 Huy hiệu đồng4 gold badges27 silver badges43 bronze badges

6

Tôi sử dụng "@fawazahmed/ract-avative-read-more" và "clipper văn bản"

Sử dụng như thế này:

import ReadMore from "@fawazahmed/react-native-read-more";
import clip from "text-clipper";
               
                  {clip(
                    this.state.fulldescription,
                    this.state.fulldescription.length,
                    { html: true, stripTags: true }
                  )}
                

Đã trả lời ngày 23 tháng 3 lúc 11:40Mar 23 at 11:40

Hướng dẫn react native render html read more - phản ứng gốc kết xuất html đọc thêm

Có một câu hỏi về dự án này? Đăng ký một tài khoản GitHub miễn phí để mở một vấn đề và liên hệ với người bảo trì và cộng đồng của nó. Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Chọn tên người dùng Địa chỉ EmailPassword

Bằng cách nhấp vào Đăng ký đăng ký cho GitHub, bạn đồng ý với Điều khoản dịch vụ và tuyên bố quyền riêng tư của chúng tôi. Chúng tôi thỉnh thoảng gửi cho bạn các email liên quan đến tài khoản.

Đã có trên Github? đăng nhập vào tài khoản của bạn

Hướng dẫn react native render html read more - phản ứng gốc kết xuất html đọc thêm

phản ứng-render-html

Dựa trên tác phẩm ban đầu của Thomas Beverley, đạo cụ cho anh ta.

Một thành phần phản ứng JavaScript tinh khiết của iOS/Android để kết xuất HTML của bạn thành các chế độ xem gốc 100%.

Hướng dẫn react native render html read more - phản ứng gốc kết xuất html đọc thêm

Phát hành

Bản phát hành Foundry (V6) cuối cùng cũng ổn định và hiện đang được đề xuất. Kiểm tra bài đăng trên blog thông báo trong trang web hoàn toàn mới của chúng tôi. Chúng tôi cũng có một hướng dẫn di cư cho những người đến từ V5 trở xuống. Check out the announcement blog post in our brand new website. We also have a migration guide for those who are coming from v5 and below.

Bạn đang ở trong chi nhánh chính là nhà cho sự phát triển mới nhất. Kiểm tra bảng dưới đây để lấy tài liệu cho phiên bản chính xác của bạn.You are on the master branch which is home for the latest development. Check the table bellow to get documentation for your exact version.

Diễn viên phụChi nhánhTài liệuMuộn nhất
tiếp theobậc thầy-
6.3 Phát hành/6.3Trang web chính thức
5.1 & nbsp; & nbsp; phát hành/5.1 & nbsp; & nbsp;Phát hành/5.1/readme.md
4.2 & nbsp; & nbsp; phát hành/4.2 & nbsp; & nbsp;Phát hành/4.2/readme.md

💻 Cài đặt

npm install react-native-render-html

yarn add react-native-render-html

Sử dụng cơ bản

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `

Hello World!

`
}; export default function App() { const { width } = useWindowDimensions(); return ( <RenderHtml contentWidth={width} source={source} /> ); }

Tài liệu

Xem trang web chính thức của chúng tôi và ứng dụng khám phá chính thức.

Ví dụ

Bạn thích học bằng ví dụ? Chúng tôi có một hướng dẫn mà từ đó GIF demo đã được trích xuất: một ứng dụng blog miễn phí WebView với HTML kết xuất tự nhiên React.

Thay đổi

Changelog có sẵn ở đây: Gói/kết xuất-hTML/changelog.md.

💡 Trợ giúp

Vui lòng tham khảo tài liệu chuyên dụng của chúng tôi.

Cộng đồng

Bạn luôn được chào đón tham gia kênh Discord của chúng tôi :-).

Đóng góp

Kiểm tra hướng dẫn đóng góp của chúng tôi.

  • Bạn có thể báo cáo lỗi trong trình theo dõi vấn đề của chúng tôi;
  • Chúng tôi xử lý các yêu cầu tính năng trong bảng Canny của chúng tôi.

Tài trợ

Bạn muốn hỗ trợ dự án này hoặc thuê chúng tôi để thực hiện một tính năng? Kiểm tra trang này.

Giấy phép

Mã nguồn được cấp phép theo giấy phép "đơn giản hóa" BSD.