React native 基于状态的动态样式

我正在尝试在我的React原生项目中添加一些动态样式。 我使用的是React原生Snackbar，但此时它出现在我的浮动操作按钮前面。这不是由材料设计的设计规则决定的

出于这个原因，每当snackbar处于活动状态时，我都需要移动我的晶圆厂。 我保持这个状态，但我需要一个基于该状态的样式

此时，我得到了以下代码：

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() {
    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对象未定义。 所以我不知道为什么这不起作用。 也许有人能帮我解决这个问题

在这一刻，我用以下方法解决了这个问题：

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

构造函数（道具）{
超级（道具）；
此.state={
snackbar：没错，
}
Snackbar.addEventListener（'show'，（）=>{this.setState（{Snackbar:true}）}）
Snackbar.addEventListener（'hidden'，（）=>{this.setState（{Snackbar:false}）}）
}
render（）{
返回{this.props.nav.push（routes.takePicture）}
style={this.state.snackbar？stylesFabUp:styles}
/>;
}
}
const stylesFabUp=StyleSheet.create({
容器：{
marginBottom:40，
背景颜色：colors.accentColor，
高度：尺寸。获取（“窗口”）。宽度/9，
宽度：尺寸。获取（'窗口'）。宽度/9，
},
})
const styles=StyleSheet.create({
容器：{
//marginBottom:this.state.snackbar？50:0，
背景颜色：colors.accentColor，
高度：尺寸。获取（“窗口”）。宽度/9，
宽度：尺寸。获取（'窗口'）。宽度/9，
},
});

---

但是我不喜欢这个解决方案，因为我有两个样式表，你不需要有两个样式表

考虑以下代码：

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() {
    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,
  },
})

构造函数（道具）{
超级（道具）；
此.state={
snackbar：没错，
}
Snackbar.addEventListener（'show'，（）=>{this.setState（{Snackbar:true}）}）
Snackbar.addEventListener（'hidden'，（）=>{this.setState（{Snackbar:false}）}）
}
render（）{
const fabPositionStyle=this.state.snackbar？styles.pushUp:styles.normal
返回{this.props.nav.push（routes.takePicture）}
style={[style.fab，fabPositionStyle]}
/>;
}
}
const styles=StyleSheet.create({
晶圆厂：{
高度：尺寸。获取（“窗口”）。宽度/9，
宽度：尺寸。获取（'窗口'）。宽度/9，
背景颜色：colors.accentColor，
},
俯卧撑：{
marginBottom:40，
},
正常：{
marginBottom:0，
},
})

我已经尝试组合一些样式。但问题是我使用的是自定义组件。要使marginBottom生效，它应该如下：container:{marginBottom:15，}考虑到这个限制，还需要做这项工作吗？如果是这样的话，您可以像您那样使用第二个样式表，或者我只编写

const fabPositionStyle=this.state.snackbar？{container:styles.pushUp}:{container:styles.normal}

。你觉得怎么样？：-）我真的很喜欢你所做的：）它更干净，那么好：）但我正在努力实现它。Ben每当我执行以下操作时`const fabPositionStyle=this.state.snackbar？{container:styles.pushUp}:{container:styles.normal}返回{this.props.nav.push（routes.takePicture）}}style={[styles.container，fabPositionStyle]}/>；`它似乎没有第一个样式（并返回默认样式）。我还收到警告，它需要一个对象而不是数组。Hmm.：-）这个怎么样？我还没有测试它，但它可以工作：-）<代码>渲染（）{const fabPositionStyle=this.state.snackbar？style.pushUp:style.normal const fabStyle={container:{…fabPositionStyle，…styles.fab}}返回{this.props.nav.push（routes.takePicture）}style={fabStyle}/>；}不幸的是，这也不起作用：（我想我必须使用两个样式表。