Hướng dẫn can i use html and css in react native? - tôi có thể sử dụng html và css trong react native không?

… Nhưng tôi sẽ nói với bạn ngay bây giờ!

React Native là một phần của sự cường điệu JavaScript hiện đại. Nếu bạn làm việc tại một công ty kỹ thuật số hoặc theo dõi một số cộng đồng phần mềm, có lẽ bạn đã nghe nói rằng React Native là tương lai của sự phát triển di động.

Nó mang đến sự phát triển di động Một số khái niệm từ phát triển web hiện đại, thật tuyệt vời. Nhưng sự giống nhau với web có thể gây ra một số nhầm lẫn nếu bạn không bao giờ chạm vào React Native - Tôi đã bối rối khi tôi bắt đầu 1 tháng trước.

Tôi sẽ cho bạn thấy 5 điều làm cho React bản địa trở nên tuyệt vời và khác với phát triển web truyền thống.

1. Nó là một ứng dụng thực sự!

Như chúng ta đã biết, React Native là một lib dựa trên JavaScript. Do đó, một số người có thể nghĩ rằng đó là một ứng dụng lai sử dụng WebView (như Cordova) hoặc thậm chí là một ứng dụng web tiến bộ.

Dù bạn có tin hay không, chúng ta có thể phát triển một ứng dụng di động gốc trong JavaScript bằng cách sử dụng React Native. Các ứng dụng này sẽ chạy trên các thiết bị di động với hiệu suất gốc, tất cả các tính năng của nó và không có WebView.native mobile app in JavaScript using React Native. These apps will run on mobile devices with native performance, all its features and no WebViews.

Không có gì để sợ về React bản địa!

2. Nó không được truyền

Khi tôi lần đầu tiên nghe về React Native, tôi nghĩ rằng nó sẽ là một ứng dụng di động được viết bằng JavaScript, nhưng được truyền sang mã gốc. Tôi có thể nhớ tại sao tôi nghĩ điều đó, nhưng tôi là người duy nhất. Kể từ khi tôi bắt đầu làm việc với React bản địa, mọi người bắt đầu hỏi tôi điều tương tự.

React Native có JavaScript thực sự chạy bên trong điện thoại thông minh của bạn.

React Native là mã JavaScript chạy trên thiết bị di động thực sự. Nó sử dụng JavaScriptCore để chạy mã trong một luồng riêng biệt, song song với luồng chính (Objective-C, Java, v.v.) và hàng đợi bóng, luồng bố cục.

Đọc thêm về kiến ​​trúc bản địa React ở đây.

3. Bạn có thể chạy các thành phần web của bạn trên ứng dụng di động của bạn

Trong tâm trí của tôi, nếu tôi có một hướng dẫn phong cách đầy các thành phần web ReactJS, tôi sẽ có thể sử dụng nó bên trong React Native. Chia sẻ các thành phần từ ứng dụng web đến ứng dụng di động. Nhưng tôi đã sai một lần nữa!But I was wrong… again!

Cấu trúc dựa trên thành phần trong React Native khác với web. Đặc biệt vì các thiết bị di động không có DOM và không chia sẻ cùng một ngôn ngữ đánh dấu của web. Vì vậy, chúng tôi không thể hiển thị các thành phần web trong các thiết bị di động, vì chúng tôi sử dụng React Native thay vì phản ứng.

4. Không có HTML

Do thiếu DOM, React Native không sử dụng các thẻ như: div, section, span, input, v.v. nhưng đừng lo lắng, hầu như mọi thẻ HTML đều có thành phần tự nhiên phản ứng tương đương, vì vậy chúng tôi có thể sử dụng Cùng một suy nghĩ của web để phát triển với các thành phần tự nhiên React View, Text, TextInput, v.v.

5. Không có CSS

Do thiếu đánh dấu, không có CSS ​​nào trong React Native. Nhưng don hoảng loạn, chúng ta có thể tạo kiểu cho ứng dụng của mình bằng cách sử dụng gần như cùng một suy nghĩ về CSS truyền thống.

Ví dụ. marginBottom: 15

Quan trọng: React Bản địa thực thi chúng tôi sử dụng bố cục flexbox theo mặc định. Vì vậy, chúng tôi không cần sử dụng phao và hiển thị để xây dựng cấu trúc bố cục của chúng tôi. React Native enforce us to use Flexbox layouts by default. So we don’t need to use float and display to build our layout structure.

Đó là nó. Nếu bạn đang có kế hoạch bắt đầu phát triển một ứng dụng di động, bạn sẽ đi trước 1 bước từ nơi tôi đang bắt đầu. Và lần tới khi bạn nghe về React Native, bạn sẽ có thể nói chuyện và thậm chí đặt câu hỏi cho mọi người về cách họ đang phát triển các ứng dụng di động của họ. If you are planning to start developing a mobile app, you are 1 step ahead from where I was when I started. And next time you hear about React Native, you’ll be able to talk and even question people about how they are developing their mobile applications.

Chẳng mấy chốc, tôi sẽ chia sẻ thêm về những thách thức của việc xây dựng ứng dụng Magnetis Mobile.

Theo dõi Magnetis Backstage và được cập nhật với Đội Magnetis!

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 chống đỡ có tên style. Các tên và giá trị kiểu thường phù hợp với cách CSS hoạt động trên web, ngoại trừ tên được viết bằng vỏ lạc đà, ví dụ: backgroundColor chứ không phải section0.

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

Khi một thành phần phát triển phức tạp, việc sử dụng section2 thường sẽ sạch hơn để xác định một số kiểu ở một nơi. Đâ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 prop style, từ đó được sử dụng để tạo kiểu cho các thành phần. Bạn có thể sử dụng điều này để tạo kiểu "Cascade" theo cách họ làm trong CSS.

Có rất nhiều cách để tùy chỉnh kiểu văn bản. Kiểm tra tham chiếu 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 một chuyên gia phong cách là học cách kiểm soát kích thước thành phần.

Các vấn đề đã biết

• React-Bản địa#29308: Trong một số trường hợp, React Native không phù hợp với cách CSS hoạt động trên web, ví dụ, khu vực cảm ứng không bao giờ mở rộng qua giới hạn chế độ xem cha mẹ và trên lề âm Android không được hỗ trợ.

Chúng ta có thể sử dụng HTML trong React Native không?

Phản ứng có sử dụng CSS để tạo kiểu không?