Skip to content
This repository has been archived by the owner on May 13, 2019. It is now read-only.

transform 首次渲染不生效 #252

Open
cpunion opened this issue May 31, 2017 · 2 comments
Open

transform 首次渲染不生效 #252

cpunion opened this issue May 31, 2017 · 2 comments

Comments

@cpunion
Copy link

cpunion commented May 31, 2017

可重现代码如下:

class ReactNativeWebExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      translateX: new Animated.Value(100)
    }
  }

  render() {
    // 暂时用这方法强行生效
    if (!this._rendered) {
      setTimeout(() => {
        this.state.translateX.setValue(100)
      })
      this._rendered = true
    }

    return (
      <View style={{width: 300, height: 400, borderWidth: 1}}>
        <Animated.View style={{
          width: 200,
          height: 200,
          borderWidth: 1,
          borderColor: 'red',
          transform: [this.state]
        }}>
        </Animated.View>
      </View>
    );
  }
}

预期内部的View偏移100,render里面加了一段代码修改Animated.Value值才生效,否则style上没有添加transform。

版本:
macOS 10.12.5
nodejs@5.12.0
npm@3.8.6
react-web@0.4.6
react@15.3.2
react-dom@15.3.2

@cpunion
Copy link
Author

cpunion commented Jun 23, 2017

查到原因了,transform 没有带上单位(比如px),被不知道哪一层忽略掉了。我在 extendProperties 里面给它加上单位就能正常工作,但是这样也不合理。Animated.Value.setValue 如果调用了就能正常处理加上单位,应该在哪里解决呢? @yuanyan

@cpunion
Copy link
Author

cpunion commented Jun 23, 2017

调用 setNativeProps.web.js 里的 convertTransform 解决了。

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant