react-native - 基于状态的动态样式

Question

我正在尝试在我的 React Native 项目中添加一些动态样式。
我正在使用 React Native Snackbar，但此时它位于我的 float 操作按钮前面。这不是 Material 设计的设计规则。

出于这个原因，每当 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,
  },
})