在不重新渲染整个组件的情况下反应本机动态样式

Question

下面的条件样式是否仍然适用于 React Native？

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

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

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

有什么想法吗？

谢谢

Answer 1

听起来您对使用 react-native 的动画模块很感兴趣。通过使用动画模块，您可以拥有变化或动画的样式。您还可以使用 LayoutAnimation。你应该阅读 Animation Documentation and 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>
    }
}

在不重新渲染整个组件的情况下反应本机动态样式

React native dynamic style without re render the whole component

stylesheet

react-native