Question

我正在运行以下补充工具栏代码。如果用户已登录，我要显示注销按钮，否则请登录按钮。如果userToken为 1 （表示用户已登录），请考虑将其作为我的变量

渲染功能

render() {
return (
  <View style={styles.container}>
    <Image source={require('./images/a1.jpg')} style={styles.img} resizeMode="cover"/>
    <Button block style={styles.btn} onPress={() => this.props.navigation.navigate('Home',)}>
      <Icon size={18} name="home" style={styles.ico}></Icon>
      <Text style={styles.text}>Home</Text>
    </Button>

    <Button block style={styles.btn} onPress={() => this.props.navigation.navigate('History',)}>
      <Icon size={18} name="history" style={styles.ico}></Icon>
      <Text style={styles.text}>History</Text>
    </Button>

    { this.renderElement() }

    <Button block style={styles.btn}>
      <Icon size={12} name="users" style={styles.ico}></Icon>
      <Text style={styles.text}>About changeangel</Text>
    </Button>
  </View>
);
}
}

this.renderElement函数->

renderElement(){
if(userToken == '1'){
  console.log('in if condition')
  return(
    <Button block style={styles.btn} onPress={()=> this.signin()}>
      <Icon size={18} name="user" style={styles.ico}></Icon>
      <Text style={styles.text}>Sign In / Sign Up</Text>
    </Button>
  )
}else{
  console.log('in else condition')
  return(
    <Button block style={styles.btn} onPress={()=> this.signin()}>
      <Icon size={18} name="user" style={styles.ico}></Icon>
      <Text style={styles.text}>Logout</Text>
    </Button>
  )
}
}

在控制台日志中，我可以看到消息，但看不到任何按钮呈现

Answer 1

找到了解决方法：

renderEle() {
    const showLogout = userToken != "null";
    const showLogin = userToken == "null";

    const display = showLogout ? "flex" : "none";
    const display2 = showLogin ? "flex" : "none";

      if(showLogout){
        return(<Button block style={[styles.btn, {display}]} onPress={() => this.signOut()}>
            <Icon size={18} name="user" style={styles.ico}></Icon>
            <Text style={styles.text}>Logout</Text>
          </Button>)
      }else{
        return(<Button block style={[styles.btn, {display2}]} onPress={()=> this.signin()}>
            <Icon size={18} name="user" style={styles.ico}></Icon>
            <Text style={styles.text}>Sign In / Sign Up</Text>
          </Button>) 
      }
    }

返回函数未呈现-反应原生

1 个答案: