在React Native中隐藏按钮

Question

我想隐藏“注册”，并且使用disable的{​​{1}}属性，但是它似乎不起作用

TouchableOpacity

但是“注册”按钮并未隐藏

我的代码：

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

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

Answer 1

执行此操作的地方

<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>)}

Answer 2

像这样使用显示“无”：

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>

Answer 3

One way is to move the desired code to a different function and call it through your render and take decision in your function whether you want to render it or not.

The advantage here is that you will get some performance boost since your are not rendering something that is not needed. Instead of hiding it through styles.

i.e:

renderSignupButton(isValid){
 if(isValid){
  return(
    <TouchableOpacity style={styles.button} >
      <Text style={styles.buttonText} onPress={this.handleSignUp}>
       Sign up
      </Text>
    </TouchableOpacity>
  );
 }

 return null;
}

render(){

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

    return (
      <View style={styles.container}>
        <TextInput .../>
        <TextInput .../>
        <TextInput ... />
        <TextInput ... />

        {this.renderSignupButton(isInvalid)}

      </View>
    );

}

    enter code here