0

@shoutem/ui と react-native exponent フレームワークを使用して、react ネイティブ アプリを作成しています。簡単なことをしたい: スタイル名 'muted' をトグル ボタンが選択されていない場合に追加します。この場合、[ログイン] と [登録] の 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>


    );
  }
}
4

1 に答える 1

1

私は個人的にShutemUIに精通していませんが、導入styleNameから、単に代替名のようclassNameに思えます（これはオブジェクトではなく文字列であり、混同しないでくださいstyle）。

いずれにせよ、次のように式で複数のスタイルを組み合わせることができます。

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

classnames utilも参照することをお勧めします。

于 2017-01-12T19:59:21.337 に答える