在React Native中隱藏按鈕

Question

我想隱藏“注冊”，並使用TouchableOpacity的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>

但是“注冊”按鈕並未隱藏

我的代碼：

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

在這里，

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