コンポーネント全体を再レンダリングせずにネイティブダイナミックスタイルに反応する

Question

この条件付きスタイリングは、まだネイティブレスで動作していますか？

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

コンポーネントがマウントされると、アクティブ状態はfalseに設定されます。

画面には、アクティブ状態をtrueに変更するボタンがあります。それから私は背景のスタイルが表示されることを期待します。しかし、ページがリロードされない限り、そうではありません。

おかげ

Answer 1

あなたが反応し、ネイティブからアニメーションモジュールを使用することに興味があるようですね。アニメートされたモジュールを使用すると、スタイルを変更またはアニメートできます。 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> 
    } 
}