Question

下面的条件样式是否仍适用于本机？

style={[styles.base, this.state.active && styles.background]}

安装组件时，活动状态设置为false。

屏幕上有一个按钮，可将活动状态更改为true。然后，我希望显示背景样式。但除非页面重新加载，否则情况并非如此。

有什么想法吗？

由于

Answer 1

听起来你有兴趣使用react-native的动画模块。通过使用Animated模块，您可以拥有更改或动画的样式。您也可以使用LayoutAnimation。您应该阅读Animation Documentation和LayoutAnimation documentation。

您可以使用LayoutAnimation开始，看看是否符合您的要求。设置很快！

以下是一个例子：

import React, { Component} from 'react';
import { View, LayoutAnimation, UIManager, Platform } from 'react-native';

class MyComponent extends Component {
    constructor(props) {
        super(props);

        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true);
        }
    componentWillUpdate() {
        LayoutAnimation.spring() // automatimagically animates style changes
    }
    render() {
        <View style={[styles.base, this.state.active && styles.background]}>
        </View>
    }
}

反映原生动态样式而不重新渲染整个组件

1 个答案: