StyleSheet (CSS) trong ứng dụng react native

Posted on June 22, 2016 by bloghieutran

Ngày hôm nay mình với bạn cùng nhau tìm hiểu về stylesheet trong react naitve.

StyleSheet là gì?

styleSheet được hiểu đơn giản là bộ mặt của một ứng dụng, nó giúp ứng dụng của mình thu hút đến khách hàng.

1.Đầu tiên mình sẽ tiến hành tạo project

react-native init tenproject

Ở đây mình cò đoạn code bên trong thẻ View mình sẽ để rỗng nhé,

class day_styleSheet extends Component {

  render() {

    return(

      <View>

          <Text>

          </Text>

      </View>

    );

  }

}

Bây giờ mình sẽ hiện thị lại đoạn Text:Chào mừng bạn đến với tutorial react native- CLB Hutech trong bài trước.

Bây giờ mình sẽ cho đoạn Text hiển thị màu đỏ thì mình phải dùng thuộc tính style. Bạn xem ví dụ đoạn code bên dưới nhé.

Chúng ta nhấn reload lại xem kết quả nhé:

kqtext

Lưu ý:Nếu trong trường hợp bạn không biết thuộc tính màu của Text là gì? thì bạn hãy liên tưởng, ví dụ như: ở đây mình sửa color thành textcolor (màu chữ chẳng hạn) bạn xem điều gì xảy ra nhé.

class day_styleSheet extends Component {

  render() {

    return(

      <View>

        <Text style={{Textcolor:'red'}}>

        Chào mừng bạn đến với tutorial react native- CLB Hutech

        </Text>

      </View>

    );

  }

}

Bạn nhấn reload xem lại kết quả nhé.

Nó sẽ báo lỗi textcolor: không có, và nó sẽ gợi ý cho bạn key (giá trị đúng của nó)

bây giờ mình muốn cho nó thêm thuộc tính backgroundColor( khung bao chữ) thì mình sẽ khai báo như sau:

class day_styleSheet extends Component {

  render() {

    return(

      <View>

        <Text style={{color:'red',backgroundColor:'blue'}}>

        Chào mừng bạn đến với tutorial react native- CLB Hutech

        </Text>

      </View>

    );

  }

và kết quả:

Bây giờ mình với bạn cùng suy nghĩ nếu như chúng ta có nhiều thuộc tính như textAlign(Canh chữ),backgroundColor(khung bao chữ),color(màu chữ) không lẽ chúng ta cứ khai báo trong biến text như trên. Như thế thì sẽ rất khó quản lý đúng không?. Vì thế chúng ta sẽ khai báo cho nó một biến riêng và đặt tên cho nó. Giờ mình sẽ ra khỏi class và khai báo cho nó một biến, các bạn xem đoạn code bên dưới nhé:

// khai báo thuộc tính style của StyleSheet StyleSheet

varstyle=StyleSheet.create({

//tên biến

  welcome:{

    color:'red',

    backgroundColor:'yellow'

  }

})

mình giải thích đoạn code trên:

style:thuộc tính của styleSheet.

welcome: Tên biến thuộc giá trị cùa style

color: Màu chữ

backgroundColor: Khung màu bao chữ.

Tiếp theo trong class biến Text mình sẽ khai báo như sau:

class day_styleSheet extends Component {

  render() {

    return(

      <View>

        <Text style={style.welcome}>

        Chào mừng bạn đến với tutorial react native- CLB Hutech

        </Text>

      </View>

    );

  }

}

Ở đoạn code <Text style={style.welcome}> mình giải thích như sau:

style={ }:thuộc tính của styleSheet và giá trị biến style thuộc nó.

ok bây giờ mình nhấn reload lại xem kết quả nhé

khaibaobien

Chúc các bạn thành công. Trong bài tiếp theo chúng ta cùng nhau tìm hiểu các thuộc tính của styleSheet nhé.

Day 1 Viết chương trình helloworld trong react naitve

Posted on June 22, 2016 by bloghieutran

Trong bài trước mình đã hướng dẫn các bạn cài đặt môi trường lập trình react native, trong bài viết này mình sẽ hướng dẫn các bạn cùng nhau tìm hiểu cấu trúc của một project react native, và viết chương trình HelloWorld đầu tiên.

Đầu tiên chúng ta tiến hành tạo project react native

build_project(1)

sau khi bạn đã build project thành công, bạn truy cập vào thư mục project của bạn

cd day1_Helloworld

Để tránh lỗi bạn nên (strart) khỏi động máy ảo Genymotion, ở đây mình chạy máy ảo 4.4.4 sau đó bạn mới thực hiện câu lệnh

react-native run-android

mayao

Sau khi khi các bạn run android thành – tạo project thành công bạn sẽ được kết quả như bên dưới

demo-project

Bây giờ chúng ta cùng nhau tìm hiểu cấu tạo của một project

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

Ở đoạn code trên là giúp ta import (thêm) những thành phần như AppRegistry, StyleSheet,Text… mà chúng ta sử dụng.

class day1_Helloworld extends Component {

  render() {

    return(

      <View>

      </View>

    );

  }

}

ở đoạn code này có ý nghĩa:

class: Lớp của một project.

render: Bên trong render là những thành phần sẽ hiển thị trên giao diện app của bạn.

return: Trả về giá trị

Bây giờ bạn hãy xóa hết bên trong code và chỉ để lại

import React, { Component } from 'react';

import {

AppRegistry,

View,

} from 'react-native';

class day1_Helloworld extends Component {

  render() {

    return(

      <View>

      </View>

    );

  }

}

AppRegistry.registerComponent('day1_Helloworld', () => day1_Helloworld);

Bây giờ mình muốn nó hiện thị một đoạn như: Chào mừng bạn đến với tutorial react native-CLB Hutech, thì mình sẽ thực hiện

text(1)

Sau khi bạn code xong bạn nhấn phím tổ hợp ctrl+s để save lại,sau đó bạn vào ,máy ảo nhấn f1 để reload lại js và xem kết quả nhé

find-text

Trong hình trên nó báo lỗi

Can`t not variable text: Nghĩa nó không tìm thấy biến Text vì mình dùng nó mà chưa khai báo, vì thế bây giờ mình sẽ khai báo nó

Bây giờ mình sẽ reload lại và xem kết quả nhé.

demotext

Chúc các bạn thành công

Day 1 Viết chương trình helloworld trong react naitve-Lập trình mobile

Posted on June 13, 2016 by bloghieutran

Đầu tiên chúng ta tiến hành tạo project react native

sau khi bạn đã build project thành công, bạn truy cập vào thư mục project của bạn

1	`cd day1_Helloworld`

Để tránh lỗi bạn nên (strart) khỏi động máy ảo Genymotion, ở đây mình chạy máy ảo 4.4.4 sau đó bạn mới thực hiện câu lệnh

react-native run-android

Sau khi khi các bạn run android thành – tạo project thành công bạn sẽ được kết quả như bên dưới

Bây giờ chúng ta cùng nhau tìm hiểu cấu tạo của một project

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

Ở đoạn code trên là giúp ta import (thêm) những thành phần như AppRegistry, StyleSheet,Text… mà chúng ta sử dụng.

class day1_Helloworld extends Component {
  render() {
    return (
      <View>
      </View>
    );
  }
}

ở đoạn code này có ý nghĩa:

class: Lớp của một project.

render: Bên trong render là những thành phần sẽ hiển thị trên giao diện app của bạn.

return: Trả về giá trị

Bây giờ bạn hãy xóa hết bên trong code và chỉ để lại

import React, { Component } from 'react';
import {
AppRegistry,
View,
} from 'react-native';
class day1_Helloworld extends Component {
  render() {
    return (
      <View>
      </View>
    );
  }
}
AppRegistry.registerComponent('day1_Helloworld', () => day1_Helloworld);

Bây giờ mình muốn nó hiện thị một đoạn như: Chào mừng bạn đến với tutorial react native-CLB Hutech, thì mình sẽ thực hiện

Sau khi bạn code xong bạn nhấn phím tổ hợp ctrl+s để save lại,sau đó bạn vào ,máy ảo nhấn f1 để reload lại js và xem kết quả nhé

Trong hình trên nó báo lỗi

Can`t not variable text: Nghĩa nó không tìm thấy biến Text vì mình dùng nó mà chưa khai báo, vì thế bây giờ mình sẽ khai báo nó

Bây giờ mình sẽ reload lại và xem kết quả nhé.

Chúc các bạn thành công

Day 1 hướng dẫn cài đặt react native

Posted on May 28, 2016 by bloghieutran

Hôm nay mình sẽ hướng dẫn các bạn từng bước cài đặt react native. Đầu tiên mình sẽ giới thiệu sơ qua về react Native.

1.React Native là gì?

React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript. Đúng vậy, chỉ đơn giản là Javascript, React Native phủ nhận định nghĩa về ứng dụng native ở đoạn trên.

Sự ra đời của React Native giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục các điểm yếu của ứng dụng web và hybrid. Và nhờ đó, chỉ với một kỹ sư thành thạo javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và bây giờ là mobile. Điều này không những có lợi cho lập trình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn.

Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload – tương tự tính năng Hot Replacement Module trong Webpack. Tính năng Live Reload khác tính năng Reload, trong khi Live Reload chỉ tải lại chức năng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn cũng dễ dàng debug javascript trong Chrome và Safari. Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc Android Studio cho Android.

2. Hướng dẫn cài đặt React Native trên windows.

Thông thường chúng ta thường cài theo cách trên trang https://facebook.github.io/react-native/docs/getting-started.html nhưng do quá trình cài đặt sẽ xảy ra một số lỗi, cũng như khó cài đặt nên mình sẽ hướng dẫn các bạn cách cài đặt bên dưới.

Bước 1: Đầu tiên bạn cần cài nodejs:https://nodejs.org/en/

cai-dat

Bạn chọn download như trong hình và cài đặt như bình thường.

Bước 2: Bạn download git tại link :https://git-scm.com/

gift

Bước 3: bạn cài đặt Chocolatey:

@powershell –NoProfile –ExecutionPolicy Bypass –Command “iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1’))” && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Tiếp đến bạn cài đặt Python 2

choco install python2

Sau khi bạn đã cài đặt chocolatey,python 2 t tiếp cài đặt React Native Command Line Tools

npm install –g react–native–cli

Bước 3: Bạn tiến hành download phần mền editor trong bài này mình sẽ dùng phần mền Atom link https://atom.io/

atom

Bước 4: Bạn tiến hành cài đặt SDk phiên bản Android SDK Build-Tools 23.0.1 bằng cách bạn mở Android Studio, trên thanh Menu bạn chọn Tools–>Android–>SDK manager

sdk

Tiếp đến tại tab SDK Tools bạn chọn Android SDK Build-Tools 23.0.1 nếu như bạn không tìm thấy Android SDK Build-Tools 23.0.1 thì bạn hãy nhấn Show Package Details.

sdk-23

Sau khi bạn đã install Android SDK Build-Tools 23.0.1 bạn quay lại tab SDK Platforms bạn chọn install các thành phần sau :

Google APIs Intel x86 Atom System Image
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

sdk1

Bước 5: Cài đặt ANDROID_HOME theo những bước sau:

Đầu tiên bạn truy cập vào Control Panel —>System and Security —–>System

system

Tiếp đến bạn chọn System protection —>Advanced

advance

Sau đó bạn chọn environment variable….. ——> và add SDk

Android-Home

Lưu ý: Nếu bạn quên đường dẫn SDK của Android thì bạn đừng quá lo lắng, thông thường nó thường nằm trong mục

C:\Users\User Name Computer\AppData\Local\Android\sdk

Cuối cùng bạn cài máy ảo Genymotion để test app sau khi các bạn đã code.

Chúc các bạn thành công

First blog post

Posted on May 28, 2016 by bloghieutran

This is your very first post. Click the Edit link to modify or delete it, or start a new post. If you like, use this post to tell readers why you started this blog and what you plan to do with it.

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31