在本机反应中隐藏按钮

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

你在哪里做的，

<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

像这样使用显示 "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 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

在本机反应中隐藏按钮

Hide button in react native

javascript

button

react-native

touchableopacity