如何切換樣式名稱並將其添加到React組件

Question

我正在使用@ shoutem / ui和react-native指數框架創建一個react native應用程序。 我想做一些簡單的事情：如果未選擇，將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' : '')} />

我還建議查看類名 util。