javascript - 在 native react 中隐藏按钮

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>