Reactjs 如何切换并向react组件添加样式名

我正在使用@shoutem/ui和react-native-exponent框架创建一个react-native应用程序。我想做一些简单的事情：如果未选中切换按钮，则向其添加样式名“mute”。在这种情况下，有两个按钮Login和Register，其中一个按钮是静音的，这取决于我们是否尝试使用其中一个按钮

我在语法方面遇到了问题，试图在jsx中执行内联条件。我看到的一些示例动态添加了类对象，但由于我使用的是shoutem/ui，我不确定类名是对象，而是字符串。我想做一个内联条件，看看是否要附加styleName字符串，但它似乎不正确

import React, { Component } from 'react';

import {
  Image,
  Title,
  Text,
  View,
  Button,
  TextInput,
  Screen,
} from '@shoutem/ui';

export default class LoginScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isRegistering: false,
    }
  }

  toggleRegister(registering) {
    this.setState({isRegistering:registering});
  }

  render() {
    return (
      <Screen styleName="vertical collapsed paper">
        <View styleName="md-gutter">
          <View styleName="horizontal">
            <Button styleName="full-width {this.state.isRegistering ? 'muted' || ''}" onPress={()=>this.toggleRegister(false)}>
              <Text>LOGIN</Text>
            </Button>
            <Button styleName="full-width {this.state.isRegistering ? '' || 'muted'}" onPress={()=>this.toggleRegister(true)}>
              <Text>Register</Text>
            </Button>
          </View>
          <TextInput
            placeholder="Username or Email"
          />
          <TextInput
            placeholder="Password"
            secureTextEntry
          />
          <Button styleName="dark">
            <Text>Submit</Text>
          </Button>
        </View>
      </Screen>


    );
  }
}

import React，{Component}来自'React'；
进口{
形象
标题
文本
看法
按钮
文本输入，
屏幕
}来自“@shoutem/ui”；
导出默认类LoginScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isRegistering:false，
}
}
切换寄存器（注册）{
this.setState（{isRegistering:registing}）；
}
render（）{
返回(
this.toggleRegister（false）}>
登录
this.toggleRegister（true）}>
登记
提交
);
}
}

我个人并不熟悉Shoutemi，但从另一个角度看，它听起来像是

样式名

只是

类名

的一个替代名称（这是一个字符串，而不是一个对象，不要与

样式

混淆）

无论如何，可以在表达式中组合多个样式，如下所示：

<Button styleName={'full-width' + (this.state.isRegistering ? ' muted' : '')} />

我还建议看看util