Cài đặt React native trên ubuntu 18.04

Để cài đặt được react native trên ubuntu phiên bản 18.04 bạn làm theo các bước sau:

1. cài đặt nodenpm.

  • Nhiều người gặp tình trạng khi cài xong xuôi rồi thì không chạy được project do không tương thích với version của nodejs, để tiện cho quá trình làm việc của mọi người mình recommened cho mọi người cài thêm nvm để quản lý được version nodejs trong máy cá nhân của mình. Mọi người cài đặt theo trình tự sau nhé (paste thẳng vào terminal và đợi thôi):
  • Cài NVM
    apt-get update
    apt-get install build-essential libssl-dev
    
    // install nvm
    curl-o-https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
    
    // reload bash
    source ~/.bashrc
    
    // kiểm tra lại version
    nvm --version
    
  • Cài Node
    // install latest node
    nvm install node
    
    // set default node version for nvm
    nvm alias default node
    
    // check version of node and npm
    node -v
    npm -v
    

2. Cài watchman

Bạn cứ làm phát theo thằng này 😁

git clone https://github.com/facebook/watchman.git
cd watchman/
git checkout v4.9.0
sudo apt-get install -y autoconf automake build-essential python-dev libssl-dev libtool
./autogen.sh
./configure
make
sudo make install

3. cài đặt android studio

  • Cài đặt Java (cái này là bắt buộc nhé).

    sudo apt install openjdk-8-jre openjdk-8-jdk
    
  • Cài android studio (Mình recommened bạn cài android studio vì nó rất tiện trong quản lý máy ảo vào một số vấn đề liên quan đến fix thư viện thiếu của máy ảo, trước mình mới tìm hiểu thì bị lỗi rất nhiều sau thì thấy thằng android studio này có trình tự fix mấy cái lỗi đó nên thấy nó rất hợp lý và cài thôi).

    sudo snap install android-studio

    => Bạn cần config lại path theo phần dưới đây vào file .bash_profile hoặc .zshrc:

    export ANDROID_HOME=$HOME/Android/Sdk
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    # Config khi bật máy ảo bằng terminal dùng alias nhanh hơn là việc gõ đường dẫn :v
    function emulator { ( cd "$(dirname "$(whence -p emulator)")" && ./emulator "[email protected]"; ) }
    alias emu="$ANDROID_HOME/tools/emulator"
    

    Reload .bash_profile hoặc .zshrc:

    source ~/.bash_profile
    

    => Cách tạo và bật máy ảo:

    // Create avd device
    avdmanager create avd -n doo1 -k "system-images;android-27;google_apis_playstore;x86" --device 'Nexus 5X
    // run emulator
    emu -avd doo1
    

4. Cài đặt react-native

  • Dạo loanh quanh thế là đủ rồi, vào vấn đề chính này. bạn cài đặt react-native-cli đúng như trên Docs luôn. Đọc kỹ hướng dẫn trước khi dùng nhé!

    npm install -g react-native-cli
    
  • Tạo và build một app nào:

    react-native init AwesomeApp
    // Move to created project dir.
    cd AwesomeApp
    // Start react-native packager
    npm start
    // open up another terminal and run android
    react-native run-android
    

Các Bước để run app

  1. Bật emulator

    emu @Pixel_API_23 => tương ứng với cái alias ở trên kia nhé! nếu bạn thích luyện công chút thì tự gõ cũng được.

  2. Chạy yarn start

    Mở terminal trỏ đến thư mục của app rồi chạy lệnh sau: yarn start chống mắt lên nó load => done không nhé! 🖖

  3. Build app

    Giữ nguyên tab terminal tab trên nhé, mở tab mới cũng trỏ đên thư mục đó và chạy lệnh sau để build app react-native run-android

Một số lỗi thường gặp

  1. Trong trường hợp máy bạn bị lỗi khi khởi chạy react-native run-android , bạn tạo thêm file local.properties trong thư mục /android của source code. và khai báo trong file vừa được tạo nội dung sau sdk.dir = /home/<USER>/Android/Sdk/ rồi chạy lại nhé!

  2. Trong trường hợp bạn chạy lại bị lỗi timestamp ....

    ERROR  A non-recoverable condition has triggered.  Watchman needs your help!
    The triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
    All requests will continue to fail with this message until you resolve
    the underlying problem.  You will find more information on fixing this at
    https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch
    

    Cách fix

    echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
    echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
    echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
    watchman shutdown-server
    
  3. Lỗi không yarn start

    watchman watch-del-all && \
    rm -rf node_modules && \
    rm -rf /tmp/metro-bundler-cache-* && \
    rm -rf /tmp/haste-map-react-native-packager-* && \
    yarn 
    

Source: https://medium.com/@dooboolab/running-react-native-app-in-ubuntu-18-04-7d1db4ac7518


All Rights Reserved