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

Question

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

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

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

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

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