反応コンポーネントにstyleNameを切り替えて追加する方法

Question

@shoutem/uiと反応ネイティブ指数フレームワークを使用して反応ネイティブアプリケーションを作成しています。私は単純なことをしたい：それが選択されていない場合は、トグルボタンにstyleName 'muted'を追加します。この場合、LoginとRegisterの2つのボタンがあり、どちらか一方を試しているかどうかによって1つはミュートされます。

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はstyleと混同しないように、むしろオブジェクトよりも、文字列である（単にclassNameの代替名であるようintroductionから、それは私に聞こえます）。

次のようにとにかく、あなたは式の中で複数のスタイルを組み合わせることができます

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

私もclassnames utilのを見てお勧めします。