Скрыть кнопку в реагировать родной

Question

Я хочу скрыть регистрацию, и я использую атрибут disable 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>

Но кнопка регистрации не скрыта

Мой код:

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({

});

Answer 1

Используйте отображение «none», как это:

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 2

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

Answer 3

Где вы это делаете,

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