12/08/2018, 18:26

Học React Native từ cơ bản đến nâng cao - Phần 2: Khái niệm cơ bản trong React Native và 1 số chia sẻ cá nhân

Trong phần này tôi sẽ giúp các bạn mới học React Native hiểu qua phần cài đặt project đã tồn tại và cùng nhau tìm hiểu khái niệm cơ bản nhất của React Native. 1. Yêu cầu thứ 1 Yêu cầu để thực hiện theo bài viết này, bạn hãy cài đặt môi trường theo bài viết dưới đây Học React Native từ cơ bản ...

Trong phần này tôi sẽ giúp các bạn mới học React Native hiểu qua phần cài đặt project đã tồn tại và cùng nhau tìm hiểu khái niệm cơ bản nhất của React Native.

1. Yêu cầu thứ 1

Yêu cầu để thực hiện theo bài viết này, bạn hãy cài đặt môi trường theo bài viết dưới đây

Học React Native từ cơ bản đến nâng cao - Phần 1 Hướng dẫn cài đặt và chạy "Hello world"

2. Yêu cầu thứ 2

Khi muốn code React Native bạn sẽ phải chọn cho mình 1 Editors phù hợp cho mình

Bạn có thể tham khảo các Editors theo link dưới đây

Top 10 Editors For React Native Mobile App Development

Còn lựa chọn của tôi là Visual Studio Code vì đơn giản là dùng khá nhẹ và tiện dụng

Nếu bạn cũng chọn Visual Studio Code như tôi thì tiếp tục cài các Extension theo bài viết dưới đây để giúp việc code React Native trở nên dễ dàng hơn

VSCode for React Native:

https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce

3. Yêu cầu thứ 3

Kéo code ví dụ React Native về máy bạn:

  • Bạn mở terminal

    git clone https://github.com/oTranThanhNghia/LearnReactNative.git

  • Khi đã kéo code về xong vào trong folder LearnReactNative mà vừa kéo về

    gõ lệnh sau để cấu hình project: npm install react-native@0.55.4

  • Cấu hình lại Android SDK trong file local.properties trong folder của Android LearnReactNativeandroid ở như sau:

sdk.dir=D:AndroidSdk
  • Chạy android gõ: react-native run-android Khi nào terminal hiển thị là bạn đã thành công.

Nếu bạn gặp phải lỗi sau thì hãy kiểm tra lại port 8081 có đang sử dụng không. Nếu có thì tắt nó đi và gõ lại lệnh npm start để khởi động lại Metro Bundler

  • Ngoài ra bạn hãy vào index.js để chọn example để chạy nhé:

1. Props

Hầu hết các thành phần có thể custom được khi được tạo ra với các tham số khác nhau. Các tham số này được gọi là props Ví dụ về Image sẽ giúp bạn sử dụng prop source để hiển thị ảnh

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

export default class Bananas extends Component {
    render() {
      let pic = {
        uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
      };
      return (
        <Image source={pic} style={{awidth: 193, height: 110}}/>
      );
    }
}

Components bạn viết ra cũng có thể sử dụng props. Ví dụ dưới đây sẽ mô tả cách sử dụng props trong Component riêng biệt

import React, { Component } from 'react';
import { 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>
    );
  }
}

Sử dụng prop name giúp bạn có thể custom Greeting component 1 cách dễ dàng và giúp tái sử dụng lại component ở nhiều nơi

2. State

Trong khi props là không thể thay đổi thì state là kiểu dữ liệu có thể update được trong tương lai

Nghe có vẻ khó hiểu nhưng bạn xem ví dụ dưới đây cho rõ ràng

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {isShowingText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.isShowingText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

Trong demo ở trên là ví dụ về sau 1 giây sẽ nhấp nháy chữ.

Trong đó:

  • props: text trong Blink component
  • state: isShowingText là cờ để hiển thị

3. Style

Style sẽ gợi nhắc các bạn nghĩ ngay đến style của Web. Tất cả cấu trúc, biến, giá trị hầu hết đều giống với CSS Bạn hãy xem ví dụ dưới đây

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

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

Trong đó:

  • set 1 phần tử: style={styles.red}
  • set 2 phần tử trở lên sẽ phải để trong [] ví dụ như style={[styles.red, styles.bigblue]}

4. Handling Touches

Các phần trên là mới chỉ đáp ứng được việc hiển thị lên app. Còn trong phần này sẽ giúp cho User tương tác được với App. Đơn giản nhất là sự kiện click vào 1 nút

Để dễ dàng nhất bạn hãy dùng cấu trúc như sau:

<View>
    <Button 
     onPress={callFunction}       
     />
</View>

Để chi tiết hơn nữa bạn xem ví dụ sau:

import React, { Component } from 'react';
import { Alert, Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
})

5. List Views

React Native cung cấp 2 loại view để hiển thị list. Đó là: FlatList và SectionList

FlatList làm việc khá tốt và mượn mà với những list dài, số lượng item có thể thay đổi được. Không giống như ScrollView thì FlatList chỉ render những thành phần nào được hiển thị trên màn hình, chứ không phải là hiển thị tất cả các thành phần trong List lên cùng 1 lúc.

FlatList yêu cầu 2 props cơ bản: datavà renderItem Trong đó:

  • data là dữ liệu để hiển thị lên list
  • renderItem là cách trình bày, màu, font, cỡ chữ trên ứng dụng

Ví dụ:

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

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},

            {key: 'Devin1'},
            {key: 'Jackson1'},
            {key: 'James1'},
            {key: 'Joel1'},
            {key: 'John1'},
            {key: 'Jillian1'},
            {key: 'Jimmy1'},
            {key: 'Julie1'},

            {key: 'Devin2'},
            {key: 'Jackson2'},
            {key: 'James2'},
            {key: 'Joel2'},
            {key: 'John2'},
            {key: 'Jillian2'},
            {key: 'Jimmy2'},
            {key: 'Julie2'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

Nếu bạn muốn chia list hiển thị thành các nhóm khác nhau thì React Native cũng cung cấp cho bạn SectionList để làm việc này

Ví dụ:

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

export default class SectionListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

Chúc bạn chạy được example mà không gặp phải lỗi nào nhé. Nếu có vấn đề gì thì bạn có thể comment dưới đây để mình support nhé

Nguồn tham khảo: https://facebook.github.io/react-native/docs/tutorial.html

Bài liên quan

Android từ cơ bản cho đến nâng cao - Android Gradle (P1)

Gradle là gì? Sao lại xử dụng Gradle trong Android? Sử dụng Gradle như thế nào? Đó là một trong rất nhiều câu hỏi mà các Android developer mới làm quen thường hỏi. Vì vậy mình sẽ giới thiệu cho các bạn về Gradle và cách sử dụng Gradle hiệu quả khi lập trình với Android. OK vì sao Google lại ...

Vũ Văn Thanh viết 16:01 ngày 07/09/2018

Android từ cơ bản cho đến nâng cao - Android Gradle (P2 - Groovy Fundamentals)

Phần này sẽ đi vào tìm hiểu cơ bản về Groovy nhé. Bạn nào chưa đọc phần 1 thì có thể đọc tại đây Thực ra chúng ta không cần cài đặt Groovy vì Gradle đã cung cấp cho ta Groovy distribution luôn rồi và ta không cần phải cài đặtGroovy. Việc ta cần làm chỉ cần đặt Groovy code vào trong file build ...

Trịnh Tiến Mạnh viết 15:58 ngày 07/09/2018

Android từ cơ bản cho đến nâng cao - Supporting Multiple Screens (p1)

Xin chào các bạn, thân là một lập trình viên Android, mình đã gặp khá nhiều trường hợp(kể cả mình) không đào sâu nghiên cứu chi tiết các thành phần trong Android, chỉ biết sử dụng nhưng không hiểu nguyên lý, cách vận hành của nó(giống mình lun :D ). Nên nhân đây mình sẽ làm một loạt bài viết giới ...

Tạ Quốc Bảo viết 15:40 ngày 07/09/2018

Golang Tag: Từ Cơ Bản đến Nâng Cao

Tag Là Gì Tag trong Golang được sử dụng để bổ sung thêm thông tin cho các field của một struct. Để hiểu rõ hơn Tag được sử dụng như thế nào và tại sao cần sử dụng chúng thì chúng ta hay bắt đầu với một số ví dụ đơn giản tạo Struct trong Golang mà không sử dụng Tag ở phần dưới đây. Struct ...

Bùi Văn Nam viết 11:18 ngày 07/09/2018

Học JSP cơ bản đến nâng cao

JavaServer Pages (JSP) là một công nghệ lập trình Server-Side mà cho bạn khả năng xây dựng các ứng dụng trên Web động, độc lập nền tảng. JSP có quyền truy cập tới toàn bộ gia đình Java APIs, bao gồm JDBC API để truy cập Enterprise Database. Loạt bài này sẽ hướng dẫn bạn cách sử dụng Java ...

Hoàng Hải Đăng viết 10:41 ngày 14/08/2018
0