Top Ad unit 728 × 90

Lập trình React native: Tìm hiểu Props

Trong những ngày hôm trước mình đã cùng bạn đi thiết lập một môi trường để có thể học lập trình React Native trên các hệ điều hành thông dụng ngày nay như: Mac OS, Windows để thực hiện lập trình ứng dụng mobile cho Android và iOS mà chỉ cần việt một lần code bằng ngôn ngữ Javascript

Các bạn có thể tham khảo bài viết sau:
  1.  Lập trình React native: Cài đặt React Native trên MacOS.
  2. Lập trình React native: Cài đặt React Native trên Windows.



Và trong bài ngày hôm nay chúng ta đi tìm hiểu một thành phần quan trọng trong React Native.

lập trình react native tìm hiểu Props
Lập trình react native tìm hiểu Props


Hầu hết các thành phần có thể được tùy chỉnh khi chúng được tạo, với các tham số khác nhau. Các tham số tạo này được gọi là props.


Ví dụ, một thành phần cơ bản là hình ảnh. Khi bạn tạo một hình ảnh, bạn có thể sử dụng một cái tên là source để kiểm soát hình ảnh nó hiển thị.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananaieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);


Lưu ý rằng {pic} được bao quanh bởi dấu ngoặc, để nhúng biến pic vào JSX. Bạn có thể đặt bất kỳ biểu thức JavaScript nào bên trong dấu ngoặc trong JSX.




Các thành phần của riêng bạn có thể sử dụng props. Điều này cho phép bạn tạo ra một thành phần duy nhất được sử dụng nhiều nơi khác nhau trong ứng dụng của bạn với các thuộc tính khác nhau ở mỗi nơi. Chỉ cần tham số this.props trong render chức năng của bạn.

Ví dụ:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);


Sử dụng namenhư là một prop cho phép chúng tôi tùy biến các Greetingthành phần, vì vậy chúng tôi có thể sử dụng lại các thành phần cho mỗi lời chào của chúng tôi. Ví dụ này cũng sử dụng Greetingthành phần trong JSX, giống như các thành phần được xây dựng sẵn. Khả năng làm điều này làm cho React trở nên mát mẻ - nếu bạn thấy mình muốn có một bộ UI nguyên thủy khác để làm việc, bạn chỉ cần sáng tạo ra những cái mới.




Một điều mới khác đang diễn ra ở đây là View. Một View rất hữu ích như là một thùng chứa cho các thành phần khác, để giúp kiểm soát phong cách và cách bố trí.
Với props và cơ bản Text,, Image và View các thành phần, bạn có thể xây dựng một loạt các màn hình tĩnh.
Lập trình React native: Tìm hiểu Props Reviewed by Thế Giới Tri Thức on tháng 12 05, 2017 Rating: 5

Không có nhận xét nào:

All Rights Reserved by THẾ GIỚI TRI THỨC © 2018
Thiết kế bởi: THẾ GIỚI TRI THỨC

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.