Как переключить и добавить styleName в реагирующий компонент

Question

Я создаю ответное родное приложение, используя @ shoutem/ui и framework-framework. Я хочу сделать что-то просто: добавьте styleName 'muted' к кнопке переключения, если она не выбрана. В этом случае есть две кнопки «Вход и регистрация», а один отключен в зависимости от того, пытаемся мы или нет.

У меня возникли проблемы с синтаксисом, пытаясь выполнить inline-условие в jsx. Некоторые примеры, которые я видел, добавляют объект класса динамически, но поскольку я использую shoutem/ui, я не уверен, что className является объектом, а скорее является строкой. Я думал о том, чтобы просто выполнить inline-условие, чтобы увидеть, добавлять ли строку 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> 


    ); 
    } 
} 

Answer 1

Я лично не знаком с ShoutemUI, но из introduction это звучит для меня как styleName просто альтернативное название для className (который является строкой, а не объект, не следует путать с style).

Во всяком случае, вы можете объединить несколько стилей в выражениях следующим образом:

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

Я также предлагаю смотреть на classnames Util.