【问题标题】:Style is not re-rendering on React Native样式不会在 React Native 上重新渲染
【发布时间】:2017-08-06 16:29:47
【问题描述】:

我对 React-Native 有疑问

我的状态:Windows 10 - Hyper V,Visual Studio Emulator Android。

我的页面上有一个组件(在我点击的地方显示)。

当我点击时,坐标在组件中发送。

< ClickAnimation x = {item.x} y = {item.y} />

该组件首先具有以下内容:

state = {
    scaleAnim: 2
};

当我第二次点击时,this.state.scaleAnim 变为 0.001

componentWillReceiveProps(nextProps) {
    if (nextProps.x != this.props.x) {
        this.setState({scaleAnim: 0.001})
    }
}

那就是渲染:

render() {
        if (this.state.scaleAnim) {
            return <Animated.View
                key={this.props.y * this.props.x}
                style={{
                zIndex: 10,
                borderColor: "blue",
                borderRadius: 400,
                borderWidth: 1,
                position: "absolute",
                top: this.props.y,
                left: this.props.x,
                width: 60,
                height: 60,
                backgroundColor: "red",
                transform: [
                    {
                        scaleY: this.state.scaleAnim
                    }, {
                        scaleX: this.state.scaleAnim
                    }
                ]
            }}>
                <Text>{this.state.scaleAnim}</Text>
            </Animated.View>
        } else {
            return <View/>
        };
    }

有了这段代码,我有以下事情:

setState 改变了值,因为文本改变了。但不是应用的样式。

你知道为什么吗?

【问题讨论】:

    标签: android css react-native


    【解决方案1】:

    我认为这可能与 FB 错误 https://github.com/facebook/react-native/issues/6278 有关 - 尝试将 scale 设置为 0.10.01 并在它仍然适用于您的情况下进行试验以及何时中断。

    【讨论】:

    • 天哪!我在 github 上看到了这个问题,这就是为什么我写了 0.001 而不是 0 ......并且使用 0.01 这是有效的。谢谢 !!真的很奇怪,它使用的是 0.01 而不是 0.001
    • 我的猜测是,如果您的视图尺寸乘以缩放因子小于 1px,它什么也不做(原始大小如何)。很乐意提供帮助。