Реагируйте на собственный динамический стиль без повторного рендеринга всего компонента

Question

Это условное моделирование ниже все еще работает с реагировать родной?

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

Когда компонент смонтирован, активное состояние установлено в false.

На экране есть кнопка, чтобы изменить активное состояние на истинное. Затем я ожидал, что стиль фона будет отображаться. Но это не тот случай, если страница перезагрузится.

Есть мысли?

Спасибо

Answer 1

Похоже, вам будет интересно использовать Анимированный модуль от реактивной системы. Используя анимированный модуль, вы можете изменять стили или анимировать их. Вы также можете использовать LayoutAnimation. Вы должны прочитать документацию по анимации и документацию по LayoutAnimation.

Вы можете начать с помощью 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>
    }
}