javascript - jsReact Native: How to animate a view's position with translateX?

I am trying to move my view off screen when the "Enter Now" button is pressed:

export class Onboarding extends Component {

  constructor(props) {
    super(props);
    this.state = {
      offsetX: new Animated.Value(0),
    }
  }

  hideOnboarding() {
    console.log("hiding"); // <-------- prints out when button pressed
    Animated.timing(
      this.state.offsetX,
      { toValue: new Animated.Value(-100) }
    ).start();
  }

  render() {
    return (
      <Animated.View style={{ transform: [{translateX: this.state.offsetX}] }}>
        ...
        <TouchableOpacity onPress={ () => { this.hideOnboarding() } }>
          <View style={styles.enterButton}>
            <Text style={styles.buttonText}>Enter Now</Text>
          </View>
        </TouchableOpacity>
      </Animated.View>
    );

But nothing is moving when I tap my button. My console statement works though. Does anyone know what I'm doing wrong?

I am trying to move my view off screen when the "Enter Now" button is pressed:

export class Onboarding extends Component {

  constructor(props) {
    super(props);
    this.state = {
      offsetX: new Animated.Value(0),
    }
  }

  hideOnboarding() {
    console.log("hiding"); // <-------- prints out when button pressed
    Animated.timing(
      this.state.offsetX,
      { toValue: new Animated.Value(-100) }
    ).start();
  }

  render() {
    return (
      <Animated.View style={{ transform: [{translateX: this.state.offsetX}] }}>
        ...
        <TouchableOpacity onPress={ () => { this.hideOnboarding() } }>
          <View style={styles.enterButton}>
            <Text style={styles.buttonText}>Enter Now</Text>
          </View>
        </TouchableOpacity>
      </Animated.View>
    );

But nothing is moving when I tap my button. My console statement works though. Does anyone know what I'm doing wrong?

Share Improve this question edited Apr 27, 2018 at 15:40 Edric 26.8k13 gold badges87 silver badges95 bronze badges asked Dec 14, 2016 at 22:26 bigpotato 27.5k60 gold badges194 silver badges360 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 12

I think you need to change:

{ toValue: new Animated.Value(-100) }

{ toValue: -100 }

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jsReact Native: How to animate a view's position with translateX? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)