Question

我在React Native中遇到动画问题。我已经能够完成一些工作，但它们都非常类似于教程，我不能让它们适用于我自己的东西。

让我朝着正确的方向前进.. 如何从左到右动画这个动作？

期望的结果

当点击“向右滑动”按钮时，主容器（MainPosition）平滑地向左移动（marginLeft -screenWidth）以向右侧显示“窗格”（paneDimensions）（右窗格）

（以下代码按预期工作但没有滑动动画效果）

App.js

module.exports = {
    "main": {
      flexDirection: 'row',
      flexWrap: 'wrap',
      backgroundColor: 'hsla(0, 0%, 0%, 1)',
    },
    "row": {
      flexDirection: 'row',
      width: '100%',
      height: '100%',
    },
    "pane": {
      justifyContent: 'center',
      alignItems: 'center',
      borderTopWidth: 50,
      borderTopColor: 'transparent',
      backgroundColor: 'hsla(38, 100%, 73%, 1)',
    },
    "paneText": {
      fontSize: 20,
      color: 'black'
    },
    "buttonsContainer": {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      width: '100%',
      height: '100%',
      paddingTop: 0,
      paddingBottom: 3,
    },
    "button": {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      width: '94%',
      marginBottom: 3,
      padding: 10,
      backgroundColor: 'hsla(38, 100%, 50%, 1)'
    },
    "buttonText": {
      fontSize: 20,
      color: '#FFF'
    },
}

AppStyleSheet.js

{{1}}

Answer 1

我终于有了这个工作（我不确定它是否正确，我确定它不是最好的方式，但它是我唯一的方式知道此刻的情况）

它基于Tutorials Point中的React Native animations tutorial中的第二个示例（到目前为止，我最容易遵循RN教程）

<强> APP.js

import React from 'react';
import { StatusBar, StyleSheet, Text, View, TouchableOpacity, Animated, Easing, Dimensions } from 'react-native';
import styles from './AppStyleSheet'

export default class App extends React.Component {

  constructor (props) {
    super(props);
    let screenWidth = Dimensions.get('window').width,
        screenHeight = Dimensions.get('window').height;
    this.state = {
      MainPosition: [styles.main, {width: screenWidth * 2}, {height: screenHeight}, {marginTop: 0}, {marginLeft: 0}],
      paneDimensions: [styles.pane, {width: screenWidth}, {height: screenHeight}]
    }
  }
  componentWillMount() {
    this.animatedLeftMargin = new Animated.Value(0)
  }
  SlidePane =(direction)=> {
    let screenHeight = Dimensions.get('window').height,
        screenWidth = Dimensions.get('window').width,
        theLeftMargin;
    if (direction === 'right') {
      theLeftMargin = parseInt('-' + screenWidth);
      Animated.timing(this.animatedLeftMargin, {
        toValue: theLeftMargin,
        duration: 300
      }).start()
    }
    this.setState({
      MainPosition: [styles.main, {width: screenWidth * 2}, {height: screenHeight}, {marginTop: 0}]
    })
  }

  render() {
    return (
        <Animated.View style={[this.state.MainPosition, {marginLeft: this.animatedLeftMargin}]}>
          <StatusBar hidden />
          <View style={this.state.paneDimensions}>
            <View style={styles.buttonsContainer}>
              <TouchableOpacity style={styles.button} onPress={() => this.SlidePane('right')}>
                  <Text style={styles.buttonText}>Slide Right</Text>
              </TouchableOpacity>
            </View>
          </View>
          <View style={this.state.paneDimensions}>
            <Text style={styles.paneText}>Right Pane</Text>
          </View>
        </Animated.View>
    ); // end return
  } // end render
} // end export

<强> P.S。

如果有人想知道我是如何做到这一点的，请回复此问题，我希望能够更好地理解，以便能够通过解释更新这个答案。

如何使用React Native获得一个简单的右幻灯片动画

1 个答案: