Hướng dẫn can we use html code in react native? - chúng ta có thể sử dụng mã html trong phản ứng gốc 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ư:

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

F:
cd F:\javascript-projects\react-native-projects\test-prj
npm start

F:
cd F:\javascript-projects\react-native-projects\test-prj
npm start

F:
cd F:\javascript-projects\react-native-projects\test-prj
npm start

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ụ.

F:
cd F:\javascript-projects\react-native-projects\test-prj
npm start

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!

Trong blog này, chúng tôi sẽ hiển thị nội dung HTML trong ứng dụng di động của chúng tôi.

Tạo một ứng dụng tự nhiên phản ứng bằng cách sử dụng expo

Tôi đã tạo dự án tự nhiên phản ứng bằng cách sử dụng Expo, mà tôi sẽ sử dụng cho dự án.

Nếu bạn chưa quen với React Native, bạn có thể theo liên kết bên dưới và tạo một dự án gốc React.

Tạo các ứng dụng gốc cho Android và iOS bằng cách sử dụng React Native

Cấu trúc dự án

Tệp SRC/Main.js

import React from 'react';
import { Text, View } from 'react-native';const Main = () => {
        return(
        
            Hello World
        
    );
}export default Main;

Tệp App.js

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

Chạy ứng dụng

Mở dấu nhắc lệnh, chuyển đến thư mục dự án của bạn và chạy ứng dụng gốc React. Trong ví dụ này, tên dự án của tôi là Test-prj.

F:
cd F:\javascript-projects\react-native-projects\test-prj
npm start

Sau khi chạy ứng dụng của bạn, bạn sẽ nhận được màn hình như bên dưới:

Tạo tệp JSON

Tạo tệp blog.json bên trong thư mục dự án/tài sản. Trong tập tin blog.json, chúng tôi có ba tiêu đề, tác giả và nội dung. Trong khóa nội dung, khóa, chúng tôi có dữ liệu ở định dạng HTML.

{
    "title": "Sentiment Classification with Bidirectional LSTM on IMDB Dataset",
    "author": "Nutan",
    "content": "
We will train model with bidirectional LSTM on the IMDB movie review sentiment classification dataset.
What is IMDB Dataset?
\n
This dataset contains movie reviews posted by people on the IMDb website, as well as the corresponding labels (“positive” or “negative”) indicating whether the reviewer liked the movie or not.
This is a dataset of 25,000 movies reviews from IMDB, labeled by sentiment (positive/negative). Reviews have been preprocessed, and each review is encoded as a list of word indexes (integers). For convenience, words are indexed by overall frequency in the dataset, so that for instance the integer “3” encodes the 3rd most frequent word in the data. This allows for quick filtering operations such as: “only consider the top 10,000 most common words, but eliminate the top 20 most common words”.
As a convention, “0” does not stand for a specific word, but instead is used to encode any unknown word.
\n
tf.keras.datasets
The tf.keras.datasets module provide a few datasets which is already-vectorized, in Numpy format. That can be used for machine learning.
\n
Module: tf.keras.datasets.imdb
\n
Public API for tf.keras.datasets.imdb namespace.
Functions
get_word_index(…): Retrieves a dict mapping words to their index in the IMDB dataset.
load_data(…): Loads the IMDB dataset.
\n
Load the dataset
\n
import tensorflow as tf
\n
tf.keras.datasets.imdb.load_data(
path=’imdb.npz’, num_words=None, skip_top=0, maxlen=None, seed=113,
start_char=1, oov_char=2, index_from=3, **kwargs
)
Args
path: where to cache the data (relative to ~/.keras/dataset).
num_words: integer or None. Words are ranked by how often they occur (in the training set) and only the num_words most frequent words are kept. Any less frequent word will appear as oov_char value in the sequence data. If None, all words are kept. Defaults to None, so all words are kept.
skip_top: skip the top N most frequently occurring words (which may not be informative). These words will appear as oov_char value in the dataset. Defaults to 0, so no words are skipped.
maxlen: int or None. Maximum sequence length. Any longer sequence will be truncated. Defaults to None, which means no truncation.
seed: int. Seed for reproducible data shuffling.
start_char: int. The start of a sequence will be marked with this character. Defaults to 1 because 0 is usually the padding character.
oov_char: int. The out-of-vocabulary character. Words that were cut out because of the num_words or skip_top limits will be replaced with this character.
index_from: int. Index actual words with this index and higher.
**kwargs Used for backwards compatibility.
Returns
Tuple of Numpy arrays: (x_train, y_train), (x_test, y_test).
x_train, x_test: lists of sequences, which are lists of indexes (integers). If the num_words argument was specific, the maximum possible index value is num_words — 1. If the maxlen argument was specified, the largest possible sequence length is maxlen.
y_train, y_test: lists of integer labels (1 or 0).
\n
max_features = 20000
\n
(x_train, y_train), (x_test, y_test) = tf.keras.datasets.imdb.load_data(
    num_words = max_features
)
\n
Print x_train, y_train, x_test, y_test
x_train.shape
\n
Output: (25000,)
"
 }

Đọc tệp JSON

Nhập tệp blog.json trong src/main.js

import  blog from '../assets/blog.json';

In dữ liệu blog trong bảng điều khiển

console.log(blog)

Ứng dụng đã chạy, làm mới ứng dụng, bạn có thể thấy dữ liệu JSON trong dấu nhắc lệnh như bên dưới.

Chúng ta có thể thấy dữ liệu JSON được hiển thị trong bảng điều khiển.

Hiển thị dữ liệu trong SRC/Main.js

const Main = () => {//console.log(blog)
    
    return(
        
            {blog.title}
            {blog.author}
            {blog.content}
        
    );
}

Làm mới ứng dụng và bạn có thể hiển thị trong màn hình.

Chúng ta có thể thấy dữ liệu được hiển thị trên màn hình, nhưng nó quá tệ về mặt trực quan. Vì vậy, chúng tôi sẽ thêm kiểu dáng CSS và chế độ xem HTML.

Cài đặt các gói phản ứng-htmlview

Đối với chế độ xem HTML, chúng tôi sẽ cài đặt gói React-HTMLVIEW. Dừng ứng dụng và cho chúng tôi bắt đầu cài đặt gói thổi.

HTMLVIEW tự nhiên React là gì?

Một thành phần lấy nội dung HTML và hiển thị nó là chế độ xem gốc, với kiểu tùy chỉnh và xử lý các liên kết, v.v. Đọc thêm

Cài đặt gói phản ứng-htmlview

npm install react-native-htmlview --save

Hiển thị nội dung blog trong chế độ xem HTML

Nhập ‘React-Native-htmlview, trong src/main.js

import HTMLView from 'react-native-htmlview';

Hiển thị nội dung

Xóa dòng này {blog.Content} và viết dòng này

Chạy ứng dụng

npm start

Mở dấu nhắc lệnh, chuyển đến thư mục dự án của bạn và chạy ứng dụng gốc React. Trong ví dụ này, tên dự án của tôi là Test-prj.

Sau khi chạy ứng dụng của bạn, bạn sẽ nhận được màn hình như bên dưới:

Tạo tệp JSON

Tạo tệp blog.json bên trong thư mục dự án/tài sản. Trong tập tin blog.json, chúng tôi có ba tiêu đề, tác giả và nội dung. Trong khóa nội dung, khóa, chúng tôi có dữ liệu ở định dạng HTML.

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

Đọc tệp JSON

Nhập tệp blog.json trong src/main.js

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

In dữ liệu blog trong bảng điều khiển

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

Ứng dụng đã chạy, làm mới ứng dụng, bạn có thể thấy dữ liệu JSON trong dấu nhắc lệnh như bên dưới.

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

Chúng ta có thể thấy dữ liệu JSON được hiển thị trong bảng điều khiển.

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

Hiển thị dữ liệu trong SRC/Main.js

Làm mới ứng dụng và bạn có thể hiển thị trong màn hình.

Chúng ta có thể thấy dữ liệu được hiển thị trên màn hình, nhưng nó quá tệ về mặt trực quan. Vì vậy, chúng tôi sẽ thêm kiểu dáng CSS và chế độ xem HTML.

Cài đặt các gói phản ứng-htmlview

import React from 'react';
import Main from './src/Main';export default function App() {
  return (
    

  );
}

Đối với chế độ xem HTML, chúng tôi sẽ cài đặt gói React-HTMLVIEW. Dừng ứng dụng và cho chúng tôi bắt đầu cài đặt gói thổi.

HTMLVIEW tự nhiên React là gì?

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

Tôi có thể sử dụng HTML và CSS trong React Native không?

Bạn có thể sử dụng HTML trong React không?

Làm cách nào để mở HTML trong React Native?