javascript - 在本机反应中隐藏按钮

Question

我想隐藏 Sign Up 并且我使用了 的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

像这样使用显示“无”：

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