状態に基づく動的スタイリング

Question

私はReact Nativeプロジェクトでダイナミックスタイリングを追加しようとしています。 React Native Snackbarを使用していますが、現時点ではフローティングアクションボタンの前に表示されます。これは、マテリアルデザインのデザインルールではありません。

そのため、そのスナックバーがアクティブなときは常にFABを移動する必要があります。 私はこの状態を維持していますが、私はその状態に基づいてスタイリングが必要です。

この時点で私は、次のコードを得た：

constructor(props){ 
     super(props); 
     this.state = { 
      snackbar: true, 
     } 
} 
../ 
const styles = StyleSheet.create({ 
    container: { 
     marginBottom: this.state.snackbar ? 50 : 0, 
     backgroundColor: colors.accentColor, 
     height: Dimensions.get('window').width/9, 
     width: Dimensions.get('window').width/9, 
    }, 
}); 

私が手にエラーは、オブジェクトが定義されていないということです。 これがなぜ機能しないのか分かりません。 誰かがこの問題で私を助けてくれるかもしれません。

この時点で私はそれは、以下の方法で解決だ：

constructor(props){ 
     super(props); 
     this.state = { 
      snackbar: true, 
     } 
     Snackbar.addEventListener('show',()=>{this.setState({snackbar:true})}) 
     Snackbar.addEventListener('hidden',()=>{this.setState({snackbar:false})}) 
    } 
    render() { 
     return <ActionButton 

       onPress={() => {this.props.nav.push(routes.takePicture)}} 
       style={this.state.snackbar ? stylesFabUp : styles} 
      />; 
    } 
} 
const stylesFabUp = StyleSheet.create({ 
    container: { 
     marginBottom: 40, 
     backgroundColor: colors.accentColor, 
     height: Dimensions.get('window').width/9, 
     width: Dimensions.get('window').width/9, 
    }, 
}) 
const styles = StyleSheet.create({ 
    container: { 
     // marginBottom: this.state.snackbar ? 50 : 0, 
     backgroundColor: colors.accentColor, 
     height: Dimensions.get('window').width/9, 
     width: Dimensions.get('window').width/9, 
    }, 
}); 

しかし、私は2つのスタイルシート

Answer 1

を得たよりも、あなたは2つのスタイルシートを持っている必要はありませんので、私は、そのソリューションが好きではありません。私はすでにいくつかのスタイリングを組み合わせてみました

constructor(props){ 
    super(props); 
    this.state = { 
     snackbar: true, 
    } 
    Snackbar.addEventListener('show',() => {this.setState({snackbar:true})}) 
    Snackbar.addEventListener('hidden',() => {this.setState({snackbar:false})}) 
    } 

    render() { 
    const fabPositionStyle = this.state.snackbar ? styles.pushUp : styles.normal 

    return <ActionButton 
     onPress={() => {this.props.nav.push(routes.takePicture)}} 
     style={[ styles.fab, fabPositionStyle ]} 
    />; 
    } 
} 

const styles = StyleSheet.create({ 
    fab: { 
    height: Dimensions.get('window').width/9, 
    width: Dimensions.get('window').width/9, 
    backgroundColor: colors.accentColor, 
    }, 
    pushUp: { 
    marginBottom: 40,  
    }, 
    normal: { 
    marginBottom: 0, 
    }, 
})