taofed / react-web

A framework for building web apps with React Native compatible API.
Other
3.36k stars 448 forks source link

transform 首次渲染不生效 #252

Open cpunion opened 7 years ago

cpunion commented 7 years ago

可重现代码如下:

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 commented 7 years ago

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

cpunion commented 7 years ago

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