[英]How to toggle and add a styleName to a react component
我正在使用@ 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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.