GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 15/01/2020 | 00:00 GMT+7

Học các thành phần cơ bản của React Native

React Native hoạt động giống như React, triển khai JSX , state và props. Tất nhiên, React Native được xây dựng trên các thành phần Native, thay vì các phần tử HTML. Do đó, nếu bạn đã quen thuộc với React thông thường, sẽ dễ dàng chọn React Native, miễn là bạn có thể hiểu các thành phần khác nhau được sử dụng. Trong hướng dẫn này, ta sẽ xem xét các thành phần Native cơ bản mà React Native sử dụng.

Không giống như React cho web, React Native yêu cầu bạn nhập từng thành phần trong dự án của bạn - sau cùng, mỗi thành phần đều được cài đặt để hoạt động cả trong Android và iOS. Đây là lý do ta sử dụng React Native, chưa kể có thể viết mọi thứ bằng JavaScript. Để nhập từng thành phần, ta sẽ chỉ cần thêm nó vào đối tượng đã nhập của ta :

import { Text, View } from "react-native";

Text và View là hai khối xây dựng cơ bản nhất của bất kỳ ứng dụng React Native nào. Chúng là nơi tốt nhất cho bất kỳ ai bắt đầu khi học React Native.

Văn bản và Chế độ xem

Như bạn có thể đoán, <Text></Text> là một shell bọc cho bất kỳ văn bản nào trong trang web . Thành phần này tương tự như <p> trong HTML. Bây giờ, tương tự như <div></div> , bạn sẽ bọc <Text></Text> trong một <View></View> . Đúng vậy, <View> hoạt động rất giống với <div> và ý tưởng cơ bản là nó là một containers hoàn hảo để phân chia và tạo kiểu cho trang web .

Đây là cách cài đặt cơ bản của một trang React Native:

import React from "react";
import { View, Text } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text> Hello World! </Text>
      </View>
    );
  }
}

Cả hai thành phần <Text> và <View> đều có các đạo cụ kiểu để bạn có thể đặt màu sắc, kích thước, v.v. Tuy nhiên, có một số điểm khác biệt quan trọng cần lưu ý. Mặc dù View hoạt động tương tự như một phần tử div , nhưng bạn không thể bao bọc bất kỳ văn bản nào trong đó, chẳng hạn như <View>this text doesn't work</View> (dù sao thì bạn cũng không nên dùng phần tử div ). Điều đó sẽ gây ra một ngoại lệ và đó là lý do tại sao ta sử dụng thành phần <Text> .

Nói về thành phần <Text> , bạn có thể bọc một thành phần khác bên trong nó như thế này:

<Text style={{ color: red }}>
  <Text style={{ fontSize: 24 }}>Here is the first text </Text>
  <Text style={{ fontSize: 14 }}>And the second text.</Text>
</Text>

// comes out as 'Here is the first text And the second text'

Khi <Text> đang bao bọc <Text> , văn bản lồng nhau sẽ xuất hiện trên cùng một dòng, giả sử có đủ không gian. Tuy nhiên, nếu hai thành phần <Text> được bao bọc trong một <View> , chúng sẽ xuất hiện trên các dòng riêng biệt.

TextInput

Thành phần này giống như một phần tử HTML <input> , nhưng như tên gọi của nó, nó chỉ dành cho đầu vào văn bản. Thay vì sử dụng lệnh gọi lại onChange , bạn có thể sử dụng onChangeText để phát hiện các thay đổi đối với văn bản trong thành phần <TextInput> . Bạn có thể sử dụng onChange , nhưng nó trả về một đối tượng: { nativeEvent: { eventCount, target, text} } .

Ngoài ra, có rất nhiều tính năng thú vị trên thành phần này. Bạn có thể đặt bàn phím kéo lên trên điện thoại bằng keyboardType (chẳng hạn như keyboardType='email-address' ), chuyển đổi tính năng tự động sửa, đặt textContentType để điện thoại tự động điền văn bản (như password trên chuỗi khóa của bạn), và nhiều hơn nữa.

Nút và cảnh báo

Thành phần <Button /> là thành phần đầu tiên tôi nhận thấy có sự khác biệt lớn so với người anh em của nó (phần tử HTML <button> ). React Native <Button /> có phần mềm hỗ trợ onPress() , trái ngược với bất kỳ thứ gì liên quan đến nhấp chuột. Nó cũng có một title hỗ trợ cho văn bản bên trong nó. Cuối cùng, nó không có giá đỡ kiểu dáng mà chỉ có giá đỡ màu sắc.

Điểm cuối cùng đó là một sự khác biệt khá lớn. Đến đây bạn có thể (và sẽ) bọc nó trong một Chế độ xem và tạo kiểu bằng shell bọc đó. Đó là một cách phổ biến để giải quyết một số hạn chế trên các thành phần React Native và bạn có thể sẽ thấy mình luôn sử dụng View để bao bọc các thành phần khác. Những gì tôi thấy mình sử dụng thường xuyên hơn là một thành phần mà ta sẽ đề cập một chút sau - <TouchableOpacity > .

Điều tôi cũng thấy thú vị về thành phần Button cơ bản này là trên nền tảng iOS, nó chỉ hiển thị dưới dạng văn bản trong tiêu đề - không có nền. Do đó, color prop sẽ chỉ thay đổi màu văn bản, mặc dù trên Android, nó sẽ thay đổi màu nền của nút.

Đây là một ví dụ nhanh về thành phần Nút.

<Button
  onPress={() => Alert.alert("button pressed!")}
  title="alert button"
  color="blue"
/>

Lưu ý: ta đang sử dụng Alert cũng được nhập từ lõi React Native. Điều này sẽ hiển thị một cảnh báo trên màn hình của ta , tương tự như một alert() trên web alert() .

Hình ảnh và Hình ảnh nền

Thành phần <Image /> khá giống với thẻ HTML img . Tuy nhiên, có một vài khác biệt, chẳng hạn như thay đổi src prop thành source . Ngoài ra, bản thân nguồn hoạt động theo cách khác: đối với hình ảnh local , bạn nhập chúng với require , như thế này <Image source={require('path/to/local/image)} /> .

Ngoài ra, trong phần hỗ trợ nguồn, bạn có thể sử dụng URI như sau: <Image source={{uri: 'https://imagesite.com/path/to/image'}} style={{height: 100, width: 100, resizeMode: contain}} . Lưu ý uri là một đối tượng, vì vậy nó cần một bộ dấu ngoặc nhọn khác, giống như các kiểu nội tuyến. Có rất nhiều đạo cụ khác để xem ở đây, nhưng một công cụ phổ biến để sử dụng là resizeMode . Điều này xác định cách thay đổi kích thước hình ảnh của bạn và để phù hợp với hình ảnh của bạn trong thành phần View chính.

Thành phần ImageBackground tương tự như thành phần <Image /> vì nó nhận được các đạo cụ giống nhau, nhưng điểm khác biệt chính ở đây là nó có thể có các phần tử con. Thành phần <Image /> đang tự đóng. Vấn đề về ImageBackground là nó khá cơ bản và giải pháp tốt hơn để cài đặt hình nền có thể là xây dựng thành phần của bạn hoặc đơn giản là đặt Image là tuyệt đối với độ mờ thấp hơn và đằng sau mọi thứ.

Những chiếc Touchables

Một điều bạn sẽ nhận thấy trong React Native là nhiều thành phần mà ta đã đề cập đến không có tất cả các đạo cụ mà bạn thường triển khai trong một ứng dụng web. Thành phần <Image /> không có giá đỡ onPress và thành phần <Button /> không có giá đỡ style . Bất kỳ thành phần Touchable nào có thể giúp ích ở đây.

Ví dụ: bạn có thể bọc bất kỳ thành phần hình ảnh nào trong một Touchable:

<TouchableHighlight onPress={this.pressHandle}>
  <Image />
</TouchableHighlight>

TouchableHighlight trong ví dụ trên hoạt động giống như một containers cho hình ảnh với một chức năng khi được nhấn, bao gồm cả hoạt ảnh dựng sẵn. Bạn cũng có thể chỉ cần thêm các thành phần View và Text trong thành phần Có thể chạm để hoạt động giống như một <Button /> nhưng với kiểu có thể tùy chỉnh.

Bây giờ có một số thành phần có thể cảm ứng khác nhau như:

  • TouchableHighlight: khi được nhấn, nền sẽ tối đi.
  • TouchableOpacity: khi được nhấn, làm mờ độ mờ của nút.
  • TouchableNativeFeedback: Hiệu ứng gợn sóng chỉ dành cho Android.
  • TouchableWithoutFeedback: một lần nhấn mà không có bất kỳ phản hồi / hiệu ứng nào.

Những hoạt ảnh này xảy ra khi được nhấn. Các thành phần có thể cảm ứng cũng có các đạo cụ độc đáo của riêng chúng mà bạn có thể tùy chỉnh theo ý thích của bạn .

ScrollView, SafeAreaView và FlatList

Lúc này, ta đã xem xét tất cả các khối xây dựng cơ bản của một ứng dụng React Native. Tuy nhiên, còn rất nhiều thứ khác nữa, và một điều bạn sẽ nhanh chóng nhận ra là màn hình điện thoại sẽ không tự động cuộn nếu chiều cao hoặc chiều rộng của nội dung vượt quá kích thước màn hình. Điều này có thể làm bạn ngạc nhiên, khi bạn có mọi thứ được bao bọc trong một thành phần View , phần tràn sẽ bị ẩn.

Đó là nơi triển khai ScrollView đơn giản. Thành phần ScrollView là thành phần cơ bản để cho phép cuộn. Tuy nhiên, FlatList cũng cho phép cuộn nhưng có dung lượng lớn hơn nhiều so với ScrollView .

Bây giờ, cài đặt cơ bản của ScrollView đang tạo ranh giới cho chế độ xem có thể cuộn, rất có thể sẽ là chiều cao và chiều rộng của màn hình. Giống như một hình ảnh, bạn có thể bọc ScrollView để tạo cho nó những ranh giới này. Thông thường, bạn có thể sử dụng thành phần View bình thường cho việc này, nhưng nếu bạn có iPhone X, bạn có thể thấy rằng View của bạn đi lên phía sau các góc tròn hoặc cụm cảm biến. SafeAreaView sẽ xử lý việc này, tạo khoảng đệm thích hợp để toàn bộ màn hình sẽ hiển thị. Dù bằng cách nào, để kéo dài toàn bộ màn hình, bạn có thể chỉ cần đặt kiểu của chế độ xem chính thành flex: 1 .

Cài đặt này với ScrollView sẽ hoạt động khi chiều cao của tất cả các phần tử của bạn được xác định local - như trong, chiều cao của trang web sẽ luôn được đặt giống nhau. Nếu có dữ liệu đến ảnh hưởng đến kích thước của nội dung, có thể khó xác định kích thước của ScrollView . Có nhiều cách để bù đắp điều đó, nhưng một hạn chế thậm chí còn lớn hơn đối với ScrollView là nó sẽ hiển thị mọi thứ cùng một lúc. Hãy tưởng tượng account Facebook của bạn hiển thị mọi câu chuyện cùng một lúc - nó sẽ không bao giờ tải!

FlatList tương tự như ScrollView , nhưng nó sử dụng tính năng tải FlatList , để chỉ những mục hiện có trên màn hình mới hiển thị. Tất nhiên, FlatList yêu cầu dữ liệu phải được chuyển đến nó. Cụ thể hơn, nó yêu cầu một mảng dữ liệu được truyền vào. Sau đó, FlatList lặp lại trên mảng đó và hiển thị từng mảng khi ở trên màn hình. Nếu một mục không xuất hiện trên màn hình, khi user cuộn đi, FlatList bỏ mục đó và tạo lại nó vào lần tiếp theo khi nó xuất hiện trên màn hình (trạng thái bị mất). Mặt khác, ScrollView không kết xuất và reload , nhưng hiển thị tất cả chúng cùng một lúc ngay từ đầu.

Đây là một ví dụ về từng loại:

<SafeAreaView style={{ flex: 1 }}>
  <ScrollView>// content in here to fill the page</ScrollView>
</SafeAreaView>

<SafeAreaView style={{ flex: 1 }}>
  <FlatList
    data={dataArray}
    renderItem={(
      { item } // item would represent one element in the dataArray
    ) => <IndividualComponent prop={item.prop} />}
    keyExtractor={item => item.id}
  />
</SafeAreView>

Bây giờ, bạn sẽ không bao giờ muốn lồng FlatList bên trong ScrollView hoặc ngược lại. Đó không phải là phương pháp hay và dù thế nào đi nữa nó cũng sẽ gây ra lỗi cho bạn. Điều quan trọng cần lưu ý với FlatList là prop renderItem được cố định để lấy các tham số này trong hàm của nó: renderItem={({item, index, separators}) => {}} . Ngoài ra, mục luôn nằm từ mảng bạn chuyển vào phần hỗ trợ data - chỉ có thể nhận trong một mảng thuần túy.

Một vài điều quan trọng khác về FlatList - keyExtractor quan tâm đến nhu cầu của React để cài đặt một khóa duy nhất trên mỗi phần tử, giống như cài đặt một chỗ dựa key trên mỗi thành phần được hiển thị bởi FlatList. Ngoài ra, nếu dataArray cập nhật vì trạng thái hoặc một chỗ dựa khác, FlatList sẽ không hiển thị lại khi nó được cài đặt trong ví dụ trên. Để cập nhật nó, bạn có thể đặt extraData prop để xem những gì sẽ cập nhật (ví dụ: extraData={this.state} ).

Gói (lại

Điều đó kết luận các thành phần cơ bản của React Native. Như bạn thấy , chúng đặc biệt hơn nhiều so với những gì bạn có thể quen. Để biết thêm thông tin về các thành phần ở đây, hãy xem tài liệu chính thức .

Tags:

Các tin liên quan