将 react-spring 用于 react-native

Posted 2023-03-07

【中文标题】将 react-spring 用于 react-native

【英文标题】：Using react-spring for 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>
    );