Reac-igen-render-html cỡ chữ

Với React Native, bạn tạo kiểu cho ứng dụng của mình bằng JavaScript. Tất cả các thành phần cốt lõi chấp nhận một giá đỡ có tên là style. Tên kiểu và giá trị thường khớp với cách CSS hoạt động trên web, ngoại trừ tên được viết bằng cách sử dụng cách viết hoa lạc đà, v.v. g. backgroundColor thay vì background-color

Prop style có thể là một đối tượng JavaScript cũ đơn giản. Đó là những gì chúng tôi thường sử dụng cho mã ví dụ. Bạn cũng có thể chuyển một mảng các kiểu - kiểu cuối cùng trong mảng được ưu tiên, vì vậy bạn có thể sử dụng kiểu này để kế thừa các kiểu

Khi một thành phần ngày càng phức tạp, việc sử dụng StyleSheet.create để xác định một số kiểu ở một nơi thường sẽ gọn gàng hơn. Đây là một ví dụ

Một mẫu phổ biến là làm cho thành phần của bạn chấp nhận một giá trị style, từ đó được sử dụng để tạo kiểu cho các thành phần con. Bạn có thể sử dụng điều này để tạo kiểu "xếp tầng" theo cách chúng thực hiện trong CSS

Có rất nhiều cách khác để tùy chỉnh kiểu văn bản. Kiểm tra tài liệu tham khảo thành phần Văn bản để biết danh sách đầy đủ

Bây giờ bạn có thể làm cho văn bản của bạn đẹp. Bước tiếp theo để trở thành chuyên gia phong cách là học cách kiểm soát kích thước thành phần

Tôi đang sử dụng gói HTML kết quả phản hồi. Tôi biết đọc nhiều hơn và ít gói công việc chỉ dành 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 khả năng đọc nhiều hơn và ít hành vi hơn

Nội dung chính Hiển thị

  • phản hồi-render-html
  • Phát hành
  • 💻 Cài đặt
  • Sử dụng cơ bản
  • Tài liệu
  • Thay đổi
  • 💡 Trợ giúp
  • cộng đồng
  • Đóng góp
  • Giấy phép

hỏi ngày 13 tháng 2 năm 2019 lúc 10. 50 13 tháng 2 năm 2019 lúc 10. 50

Reac-igen-render-html cỡ chữ

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

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 }
                  )}
                
1 để đọc nhiều hơn/ít hơn và sử dụng
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 }
                  )}
                
2 để 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

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 }
                  )}
                
3, hiện tại là 3 dòng

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

https. //www. npmjs. com/gói/Reac-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. 13 13 tháng 2 năm 2019 lúc 11. 13

Saeidsaeid Saeid

1. 9464 Huy hiệu vàng27 Huy hiệu bạc43 Huy hiệu đồng4 huy hiệu vàng27 huy hiệu bạc43 huy hiệu đồng

6

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

Use as this

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ả ngày 23 tháng 3 lúc 11. 40 23 tháng 3 lúc 11. 40

Có một câu hỏi về dự án này? . Đăng ký tài khoản GitHub miễn phí để mở một vấn đề và liên hệ với những người bảo trì và cộng đồng của nó

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 đề nghị gửi cho bạn các email liên quan đến tài khoản

has been on Github?

phản hồi-render-html

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

Một phần phản hồi JavaScript tinh khiết của iOS/Android để xuất HTML của bạn về chế độ xem gốc 100%

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. Xem bài đăng trên blog thông báo trên trang web hoàn toàn mới của chúng tôi. Chúng tôi cũng có hướng dẫn di chuyển cho những người đến từ v5 trở xuống

Bạn đang ở trong chi nhánh chính là nhà 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. Bạn đang ở nhánh chính, nơi phát triển mới nhất. Kiểm tra bảng bên dưới để lấy tài liệu cho phiên bản chính xác của bạn

Diễn viên phụChi nhánhTài liệuMuộn nhất tiếp theobậc thầy-6. 3Phát hành/6. 3 Trang web chính thức 5. 1   . 1   . 1/readme. md4. 2   . 2   . 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ụ? . một ứng dụng blog miễn phí WebView với HTML kết xuất tự nhiên React