React Native tips and tricks

Позволю себе привести несколько практических рекомендаций, которые позволят облегчить жизнь при работе с React Native. И себе при старте нового проекта, и людям, так сказать.

Нет глобальному окружению

На вебе сейчас активно используют Docker. В том числе и для того, чтобы окружение было у всех одинаково и, как плюс, изолировано от операционной системы. Мобильные в докере — не всегда хорошая идея. Но и здесь изолироваться можно.

Для управления версиями node.js, рекомендую n. Установка проста.

# установить
$ curl -L https://git.io/n-install | bash

# добавить путь в .bashrc или .zshrc
$ cat .zshrc:
export N_PREFIX="$HOME/n"; [[ :$PATH: == *":$N_PREFIX/bin:"* ]]

# выбрать версию node
$ n 15.5.0

По-умолчанию путь к node будет ${HOME}/n/bin/node. Чтобы Xcode мог найти его, надо создать символьную ссылку.

$ ln -s $(which node) /usr/local/bin/node

Если n перестал быть нужным, удалите версию node и саму директорию, не забудьте поправить .bashrc/.zshrc.

$ n rm 15.5.0
$ rm -rf ~/n

Процесс изоляции и управления версиями ruby немногим сложнее. Зато при установке зависимостей для iOS никаких root-прав с нас спрашивать не будут.

Псевдонимы команд

Для разгрузки долговременной памяти можно создать псевдонимы команд в тех же .bashrc или .zshrc. Все команды выполняются в директории проекта. Плюс: команда короче, её всегда можно подсмотреть.

# запустить эмулятор iOS в режиме отладки
alias run_ios="react-native run-ios --simulator=\"iPhone 12\" --configuration=debug"

# запустить на реальном устройстве, где iPhoneName - имя вашего iPhone
alias run_ios_on_device="react-native run-ios --simulator=\"iPhoneName\""

# запустить эмулятор Android в режиме отладки
alias run_android="react-native run-android --variant=debug"

# запустить metro
alias run_metro="react-native start"

Впрочем, всё это можно указать и для отдельно взятого проекта. Тогда править надо скрипты package.json.

Импорт относительно корня проекта

Многим неудобно импортировать файлы по относительному пути. В вебе эту проблему решает webpack. В React Native нам поможет babel:

$ yarn add -D babel-plugin-module-resolver

Изменим .babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['module-resolver',
      {
        root: ['./src'],
        extensions: ['.js', '.ios.js', '.android.js'],
      },
    ],
  ],
}

Пользователям VS Code понадобится создать файл jsconfig.json в корне проекта:

{
  "compilerOptions": {
    "target": "esnext",
    "allowSyntheticDefaultImports": false,
    "rootDir": "./",
    "baseUrl": "src/"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Настройки по вкусу, главное, чтобы baseUrl соответствовал директории root в .babel.config.js. Импорт получится примерно такой:

import App from 'app' // обратились к файлу app.js из src/app.js
import { Hello } from 'components/hello' // к Hello из src/components/hello

Очистка

Иногда странное поведние объясняется использованием кэша. После сброса кэша всё встаёт на свои места. Сбросить кэш можно следующим образом:

$ watchman watch-del-all
$ rm -rf $TMPDIR/react-*
$ yarn cache clean && rm -rf node_modules/ && yarn install

Процесс очистки от «хвостов» предыдущих сборок для разных платформ отличается.

Для iOS:

$ gem install --user-install cocoapods-deintegrate cocoapods-clean

$ cd $projectName/ios
$ pod deintegrate
$ pod cache clean --all

# удалить сборку: rm -rf ios/build

Для Android:

$ cd $projectName/android
$ ./gradlew clean
$ ./gradlew cleanBuildCache

# удалить сборку: rm -rf android/app/build