Install React Native

React Native là gì?

React Native là framework giúp ta viết các ứng dụng Native chỉ bằng Javascript do Facebook phát hành. Nó sử dụng cùng thiết kế như React. Hiểu đơn giản bạn viết code Javascript để có thể sử dụng cho cả thiết bị iOS và Android. Do đó React Native sẽ rất dễ dàng với người đã nắm vững Javascript.

Cài đặt

Bây giờ mình sẽ hướng dẫn cài đặt với Linux

  • Install android sdk
sudo add-apt-repository ppa:openjdk-r/ppa
sudo apt-get update
sudo apt-get install openjdk-7-jre

# install openjdk
sudo apt-get install openjdk-7-jdk

# download android sdk
wget http://dl.google.com/android/android-sdk_r24.2-linux.tgz

tar -xvf android-sdk_r24.2-linux.tgz
cd android-sdk-linux/tools

# install all sdk packages
./android update sdk --no-ui

# set path
vi ~/.zshrc << EOT

export PATH=${PATH}:$HOME/sdk/android-sdk-linux/platform-tools:$HOME/sdk/android-sdk-linux/tools:$HOME/sdk/android-sdk-linux/build-tools/22.0.1/

EOT

source ~/.zshrc

# adb
sudo apt-get install libc6:i386 libstdc++6:i386
# aapt
sudo apt-get install zlib1g:i386
sudo apt update
sudo apt install android-tools-adb android-tools-fastboot

Build app

  • Sau khi cài xong, giờ thực hiện build app
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
  • Nếu build fail do lỗi version nodejs or npm thì update lại version
 sudo npm install -g [email protected] #update version npm
 curl -sL https://deb.nodesource.com/setup_9.x | sudo bash -  #update version node 9._
 sudo apt-get install nodejs
  • Nếu bạn muốn build app không dùng máy ảo có thể dùng Expo App trên điện thoại iOS hoặc Android của bạn và kết nối với cùng một mạng không dây như máy tính của bạn. Sử dụng ứng dụng Expo, quét mã QR từ thiết bị đầu cuối của bạn để mở project của bạn. https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en

Kết quả

ví dụ:

# App.js
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

Tài liệu tham khảo

https://facebook.github.io/react-native/docs/getting-started.html

Bài tiếp theo sử dụng firebase https://viblo.asia/p/react-native-firebase-4P856RXa5Y3


All Rights Reserved