Open cpunion opened 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
查到原因了,transform 没有带上单位(比如px),被不知道哪一层忽略掉了。我在 extendProperties 里面给它加上单位就能正常工作,但是这样也不合理。Animated.Value.setValue 如果调用了就能正常处理加上单位,应该在哪里解决呢? @yuanyan
extendProperties
调用 setNativeProps.web.js 里的 convertTransform 解决了。
可重现代码如下:
预期内部的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