Javascript 在react native中隐藏按钮

我想隐藏注册，我使用了

touchablepacity

的

disable

属性，但它似乎不起作用

 const isInvalid = 
       passwordOne !== passwordTwo || 
       passwordOne === "" || 
       email === "" || 
       username === "";

<TouchableOpacity style={styles.button} disabled={isInvalid}>
   <Text style={styles.buttonText} onPress={this.handleSignUp}>
      Sign up
   </Text>
 </TouchableOpacity>

const isInvalid=
密码一密码二| |
passwordOne==“”| |
电子邮件===“||”
用户名==“”；
注册

但是注册按钮并没有隐藏

我的代码：

import ....

const INITIAL_STATE = {
...
};

export default class Signup extends Component<{}> {

  handleSignUp = () => {
    ...
  };

  render() {

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === "" ||
      email === "" ||
      username === "";
    return (
      <View style={styles.container}>

        <TextInput .../>
        <TextInput .../>
        <TextInput ... />
        <TextInput ... />

        <TouchableOpacity style={styles.button} disabled={isInvalid}>
          <Text style={styles.buttonText} onPress={this.handleSignUp}>
            Sign up
          </Text>
        </TouchableOpacity>


      </View>
    );
  }
}

const styles = StyleSheet.create({

});

导入。。。。
常量初始状态={
...
};
导出默认类注册扩展组件{
handleSignUp=（）=>{
...
};
render（）{
康斯特·伊森瓦利德=
密码一！==密码二||
passwordOne==“”||
电子邮件===“”||
用户名==“”；
返回(
注册
);
}
}
const styles=StyleSheet.create({
});

在您执行此操作的地方

<TouchableOpacity style={styles.button} disabled={isInvalid}>
   <Text style={styles.buttonText} onPress={this.handleSignUp}>
      Sign up
   </Text>
</TouchableOpacity>

注册

这样做：

{isInvalid && (<TouchableOpacity style={styles.button} disabled={isInvalid}>
   <Text style={styles.buttonText} onPress={this.handleSignUp}>
      Sign up
   </Text>
</TouchableOpacity>)}

{isInvalid&&(
注册
)}

在您执行此操作的地方

<TouchableOpacity style={styles.button} disabled={isInvalid}>
   <Text style={styles.buttonText} onPress={this.handleSignUp}>
      Sign up
   </Text>
</TouchableOpacity>

注册

这样做：

{isInvalid && (<TouchableOpacity style={styles.button} disabled={isInvalid}>
   <Text style={styles.buttonText} onPress={this.handleSignUp}>
      Sign up
   </Text>
</TouchableOpacity>)}

{isInvalid&&(
注册
)}

使用如下显示“无”：

const isInvalid = 
   passwordOne !== passwordTwo || 
   passwordOne === "" || 
   email === "" || 
   username === "";

const display = isInvalid ? "none" : "flex";

<TouchableOpacity style={[styles.button, {display}]}> // Put display value here
  <Text style={styles.buttonText} onPress={this.handleSignUp}>
    Sign up
  </Text>
</TouchableOpacity>

const isInvalid=
密码一密码二| |
passwordOne==“”| |
电子邮件===“||”
用户名==“”；
常量显示=isInvalid？“无”：“弹性”；
//把显示值放在这里
注册

使用如下显示“无”：

const isInvalid = 
   passwordOne !== passwordTwo || 
   passwordOne === "" || 
   email === "" || 
   username === "";

const display = isInvalid ? "none" : "flex";

<TouchableOpacity style={[styles.button, {display}]}> // Put display value here
  <Text style={styles.buttonText} onPress={this.handleSignUp}>
    Sign up
  </Text>
</TouchableOpacity>

const isInvalid=
密码一密码二| |
passwordOne==“”| |
电子邮件===“||”
用户名==“”；
常量显示=isInvalid？“无”：“弹性”；
//把显示值放在这里
注册

一种方法是将所需代码移动到另一个函数，并通过渲染调用它，然后在函数中决定是否渲染它。
这里的优点是，您将获得一些性能提升，因为您没有渲染不需要的内容。而不是通过样式隐藏它。
即：
renderSignupButton（isValid）{
如果（有效）{
返回(
注册
);
}
返回null；
}
render（）{
康斯特·伊森瓦利德=
密码一！==密码二||
passwordOne==“”||
电子邮件===“”||
用户名==“”；
返回(
{this.renderSignupButton（isInvalid）}
);
}
在这里输入代码

一种方法是将所需代码移动到另一个函数，并通过渲染调用它，然后在函数中决定是否渲染它。
这里的优点是，您将获得一些性能提升，因为您没有渲染不需要的内容。而不是通过样式隐藏它。
即：
renderSignupButton（isValid）{
如果（有效）{
返回(
注册
);
}
返回null；
}
render（）{
康斯特·伊森瓦利德=
密码一！==密码二||
passwordOne==“”||
电子邮件===“”||
用户名==“”；
返回(
{this.renderSignupButton（isInvalid）}
);
}
在这里输入代码