Mô phỏng hiển thị: nội dòng trong React Native

Question

Phản ứng gốc không hỗ trợ thuộc tính CSS display và theo mặc định tất cả các phần tử sử dụng hành vi của display: flex (không có inline-flex). Hầu hết các bố trí không phải flex có thể được mô phỏng với các thuộc tính flex, nhưng tôi bối rối với văn bản nội tuyến.

Ứng dụng của tôi có vùng chứa chứa nhiều từ trong văn bản, một số từ cần định dạng. Điều này có nghĩa là tôi cần sử dụng các nhịp để thực hiện định dạng. Để đạt được gói của các nhịp, tôi có thể thiết lập các container để sử dụng flex-wrap: wrap, nhưng điều này sẽ chỉ cho phép gói ở phần cuối của một khoảng chứ không phải là hành vi nội tuyến truyền thống của gói tại ngắt từ.

Vấn đề hình dung (nhịp trong màu vàng):

(qua http://codepen.io/anon/pen/GoWmdm?editors=110)

Có cách nào để có được gói phù hợp và đúng mô phỏng inline sử dụng tài sản flex?

Answer 1

Bạn có thể nhận được hiệu ứng này bằng cách gói các yếu tố văn bản trong các yếu tố văn bản khác theo cách mà bạn sẽ quấn một khoảng trong một div hoặc yếu tố khác:

<View> 
    <Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>  
</View> 

Bạn cũng có thể nhận được hiệu ứng này bằng cách tuyên bố một flexDirection:' hàng 'tài sản trên phụ huynh cùng với một flexWrap:' bọc '. Sau đó, trẻ em sẽ hiển thị nội tuyến:

<View style={{flexDirection:'row', flexWrap:'wrap'}}> 
    <Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text> 
</View> 

Kiểm tra this ví dụ.

https://rnplay.org/apps/-rzWGg