Использование react-spring для react-native

Я хочу использовать эту библиотеку для нативной реакции, но не могу понять, как это сделать. Ссылка на документацию для response-native не работает. Могу ли я использовать библиотеку для react-native?

react-native animation react-spring

10.10.2018 07:49

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

7 996

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

React-Spring можно использовать для react-native. Они обновили его для всей платформы. Попробуйте это: - yarn add [email protected]

import React from 'react'
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'
import { Spring, animated } from 'react-spring/dist/react-spring-native.esm'

const styles = {
    flex: 1,
    margin: 0,
    borderRadius: 35,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
}

export default class App extends React.Component {
    state = { flag: true }
    toggle = () => this.setState(state => ({ flag: !state.flag }))
    render() {
        const { flag } = this.state
        return (
            <Spring native from = {{ margin: 0 }} to = {{ margin: flag ? 100 : 0 }}>
                {props => (
                    <TouchableWithoutFeedback onPressIn = {this.toggle}>
                        <animated.View style = {{ ...styles, ...props }}>
                            <Text>It's working!</Text>
                        </animated.View>
                    </TouchableWithoutFeedback>
                )}
            </Spring>
        )
    }
}

Анимированный.View был всего лишь этапом тестирования, мы не хотели включать все подобные компоненты RN, потому что это раздуло бы конечный пакет. Вы в основном сами расширяете их: const AnimatedView = animated(View). Импорт также проще: import { Spring, animated } from 'react-spring'

— 10.10.2018 12:20

Спасибо за вашу любезную помощь. Когда я попытался использовать animated.View, он выдает ошибку, но предоставленное @hpalu решение работает. Спасибо вам обоим :)

— 11.10.2018 07:29

10.10.2018 08:03

Ответ принят как подходящий

Пример ниже работает.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native';
import { Spring, animated } from 'react-spring'

const AnimatedView = animated(View)

const styles = {
  flex: 1,
  margin: 0,
  borderRadius: 35,
  backgroundColor: 'red',
  alignItems: 'center',
  justifyContent: 'center',
}

type Props = {};
export default class App extends Component<Props> {

  state = { flag: true }
    toggle = () => this.setState(state => ({ flag: !state.flag }))
  render() {
    const { flag } = this.state
    return (
      <Spring native from = {{ margin: 0 }} to = {{ margin: flag ? 100 : 0 }}>
      {props => (
          <TouchableWithoutFeedback onPressIn = {this.toggle}>
              <AnimatedView style = {{ ...styles, ...props }}>
                  <Text>It's working!</Text>
              </AnimatedView>
          </TouchableWithoutFeedback>
      )}
  </Spring>
    );
  }
}

11.10.2018 07:31

Тем, у кого есть проблемы, попробуйте использовать другой импорт. Это сработало для меня на Expo React Native.

import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback } from 'react-native';
import { Spring, animated } from 'react-spring/renderprops-native';

const AnimatedView = animated(View);

const styles = {
    flex: 1,
    margin: 0,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
}


export default class App extends Component {

    state = { flag: true }
    toggle = () => this.setState(state => ({ flag: !state.flag }))
    render() {
        const { flag } = this.state
        return (
            <Spring
                native
                from = {{ margin: 0 }}
                to = {{ margin: flag ? 100 : 0 }}
            >
                {props => (
                    <TouchableWithoutFeedback onPressIn = {() => this.toggle()}>
                        <AnimatedView style = {{ ...styles, ...props }}>
                            <Text>{flag ? "true" : 'false'}</Text>
                        </AnimatedView>
                    </TouchableWithoutFeedback>
                )}
            </Spring>
        );
    }
}

28.04.2019 08:13

Другие вопросы по теме

Как анимировать несколько столбцов в виде точек с помощью matplotlib из фрейма данных pandas с помощью NaN в python

Анимация элемента активного списка чата WhatsApp

Управление анимацией спрайтов с помощью нажатия клавиш

Почему настройка отображения для «Масштабирования» и использование более одного монитора вызывают анимацию окна моего приложения WPF в другой области на моем мониторе?

LineCollection анимация

SVG вращать анимацию (трансформация происхождения)

Перемещение Gameobject, генерирующего объекты на основе данных

Анимация свойств Android не останавливается

Как сделать тестовый пример для угловой анимации

Перетащите карточку к избранному элементу

Использование react-spring для react-native

Ответы 3

Другие вопросы по теме

Похожие вопросы