Перейти к содержанию

Начало работы

Раздел Фундаментальные основы был разработан для того, чтобы помочь вам получить прочный фундамент основных концепций Reanimated и дать вам уверенность в себе для самостоятельного изучения более сложных примеров использования. Этот раздел содержит интерактивные примеры, фрагменты кода и пояснения. Вы готовы? Давайте погрузимся!

Что такое React Native Reanimated?

React Native Reanimated - это мощная библиотека анимации, созданная компанией Software Mansion.

С помощью Reanimated можно легко создавать плавные анимации и взаимодействия, работающие в потоке UI thread.

Быстрый старт

Если у вас нет существующего проекта, вы можете создать новое приложение Expo, используя шаблон:

1
npx create-expo-app my-app -e with-reanimated

1
yarn create expo-app my-app -e with-reanimated

В качестве альтернативы вы можете изучить наши примеры на GitHub.

Установка

Чтобы добавить Reanimated в проект, необходимо выполнить три шага:

Шаг 1: Установка пакета

Установите пакет react-native-reanimated из npm:

1
npx expo install react-native-reanimated

1
npm install react-native-reanimated

1
yarn add react-native-reanimated

Шаг 2: Добавьте плагин babel от Reanimated

Добавьте плагин react-native-reanimated/plugin в ваш файл babel.config.js.

1
2
3
4
5
6
7
8
9
module.exports = {
    presets: [
        // ... // don't add it here :)
    ],
    plugins: [
        // ...
        'react-native-reanimated/plugin',
    ],
};

react-native-reanimated/plugin должен быть указан последним.

Why do I need this?

Одним словом, плагин Reanimated babel автоматически преобразует специальные JavaScript-функции (называемые worklets) таким образом, чтобы они могли быть переданы и запущены в потоке UI.

Для получения более подробной информации о плагине перейдите в раздел Reanimated babel plugin.

Шаг 3: Очистить кэш (рекомендуется)

1
npx expo start -c

1
npm start -- --reset-cache

1
yarn start --reset-cache

Настройка под конкретную платформу

Android

Никаких дополнительных действий не требуется.

iOS

При разработке под iOS перед запуском приложения обязательно установите pods:

1
cd ios && pod install && cd ..

Web

Для создания приложений, ориентированных на веб, с использованием react-native-web мы настоятельно рекомендуем использовать Expo.

Для использования Reanimated в вебе достаточно установить и добавить @babel/plugin-proposal-export-namespace-from плагин Babel в ваш babel.config.js.

1
npx expo install @babel/plugin-proposal-export-namespace-from

1
npm install @babel/plugin-proposal-export-namespace-from

1
yarn add @babel/plugin-proposal-export-namespace-from

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
module.exports = {
    presets: [
        // ... // don't add it here :)
    ],
    plugins: [
        // ...
        '@babel/plugin-proposal-export-namespace-from',
        'react-native-reanimated/plugin',
    ],
};

Убедитесь, что список react-native-reanimated/plugin является последним.

Ссылки

Комментарии