react-native - 将 react-spring 用于 react-native

Question

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

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

`

Answer 2

对于任何有问题的人，请尝试使用不同的导入。这对我来说在世博会的反应原生上有用。

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

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