将 react-spring 用于 react-native答案

【问题标题】：Using react-spring for react-native将 react-spring 用于 react-native
【发布时间】：2019-03-14 23:04:57
【问题描述】：

我想将此库用于 react-native，但不知道如何使用。 react-native 的文档链接已损坏。我可以将库用于 react-native 吗？

【问题讨论】：

【解决方案1】：

React-Spring 可用于 react-native。他们已经为所有平台更新了它。试试这个： - yarn add react-spring@5.3.0-beta.0

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>
        )
    }
}

【讨论】：

animated.View 只是一个测试阶段的东西，我们不想包含所有这样的 RN 组件，因为它会使最终包膨胀。你基本上自己扩展它们：const AnimatedView = animated(View)。导入也更简单：import { Spring, animated } from 'react-spring'
感谢您的热心帮助。当我尝试使用 animated.View 时，它给了我一个错误，但@hpalu 提供的解决方案有效。谢谢你们两个:)

【解决方案2】：

对于有问题的任何人，请尝试使用不同的导入。这对我在世博会的 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>
        );
    }
}

【讨论】：

【解决方案3】：

下面的例子有效。

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>
    );
  }
}

【讨论】：