Tìm hiểu về React Native (phần 1)

1 min read

React Native là mã nguồn mở( framework) để tạo ra các ứng dụng(applications) cho Android và iOS bằng cách sử dụng thư viện React và các ứng dụng gốc(Native app) của các nền tảng ứng dụng(the app platform’s native capabilities)

Views and mobile development

Khi phát triển Android and iOS, Views là 1 khối xây dựng UI của người dùng.Thậm chí views có thể chỉ là 1 button hoặc 1 đoạn text.

<Text>Some more text</Text>

Trong quá trình phát triển Android  bạn có thể viết views trong Kotlin or Java. Còn iOS bạn có thể sử dụng Swift or Objective-C.

Với React Native bạn viết views với JavaScript và sử dụng React components. Bởi vì React Native components được hỗ trợ cùng chế độ xem như Android and iOS nên React Native apps có giao diện, hoạt động giống mọi apps khác và những cái “platform-backed components” như này được gọi là Native Components.

React Native cung cấp 1 bộ React Native’s Core Components. Ngoài ra còn có thêm community-contributed components do cộng động đóng góp.

Core Components

Đây là những thành phần cơ bản của core Components


Vì React Native sử dụng cấu trúc API giống như React components, nên bạn sẽ cần hiểu tìm hiểu trước về React component APIs.

ex:

import React from 'react';
import {View, Text, Image, ScrollView, TextInput} from 'react-native';


const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{width: 200, height: 200}}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
};


export default App;

Vui lòng ở xem tiếp ở bài Những kiến thức cần biết về React trước khi bắt đầu React Native

Nguồn dịch (https://reactnative.dev/)

Avatar photo

2 Replies to “Tìm hiểu về React Native (phần 1)”

Leave a Reply

Your email address will not be published. Required fields are marked *