基于状态的动态样式 [英] Dynamic styling based on a state

问题描述

我正在尝试在我的React Native项目中添加一些动态样式. 我正在使用React Native Snackbar，但此刻它在我的Floating Action Button前面.这不是材料设计的设计规则.

I am trying to add some dynamic styling in my React Native project. I am using a React Native Snackbar but at this moment it goes in front of my Floating Action Button. This is not by the design rules of Material design.

因此，每当小吃店处于活动状态时，我都需要移动FAB. 我将其保持在某种状态，但是我需要基于该状态的样式.

For that reason I need to move my FAB whenever that snackbar is active. I am keeping this in a state but I need a styling based on that state.

此刻，我得到了以下代码:

At this moment I got the following code:

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,
    },
});

我得到的错误是它的对象未定义. 所以我不确定为什么这行不通. 也许有人可以帮助我解决这个问题.

The error that I get is that it object is undefined. So I am not sure why this isn't working. Maybe somebody can help me out with this problem.

此刻，我通过以下方式解决了该问题:

At this moment I got it solved in the following way:

    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,
    },
});

但是我不喜欢那种解决方案，因为我得到了两个样式表

But I don't like that solution because than I got 2 stylesheets

推荐答案

您不需要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,
  },
})

这篇关于基于状态的动态样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！