NavBar React-Native

时间:2019-06-25 09:48:28

标签: javascript android react-native

我在navBar中发现有关文本的问题。

我使用路由器通量。

我的问题是我已在navBar的右侧插入了注销,但是我只会在用户类别中显示此按钮。

因此,如果您的角色是“ user1”:您可以注销。

如果您的角色是“ user2”:您无法注销,也不应看到“注销”文本。

这是我用来显示注销按钮的代码:

App.js

export default class App extends Component {
  static redirectLogout() {
    Alert.alert("Logout", "Logout effettuato con successo");
    Actions.authentication();
  }
  static logout() {
    Utente.clearUtenteLoggato();
    App.redirectLogout();
  }
    <Scene
                key="homepageutente"
                component={HomepageUtente}
                type="reset"
                leftTitle="Home"
                leftButtonTextStyle={{color: "#ffffff"}}
                onLeft={() => Actions.authentication()}
                rightButtonTextStyle={{color: "#ffffff"}}
                rightTitle="Logout"
                onRight={() => App.logout()}
                navigationBarStyle={{ backgroundColor: "#64c7c0" }}
              />

你知道我该怎么办?如果需要更多信息,我将立即提供。非常感谢

编辑: 这是应用程序的结构:

第一页:

身份验证: (你可以去)
  -> LoginConsumer

-> LoginPlus

我使用一个白色页面,单击一个按钮后就会加载该页面,以检查您是否已登录以及您是哪种用户。

Starting.js

class Starting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  componentWillMount() {
    Utente.getUtenteLoggato()
      .then(dataUtenteLoggato => {   
        if (dataUtenteLoggato !== null) {
          global.utente = new Utente(JSON.parse(dataUtenteLoggato));
          Actions.homepageutente()({type: 'reset'});
        } else if(Roles == "ROLE_PLUS") { // But this doesn't work :(
          console.log(Roles)
          Actions.loginplus();
        }
        else {
          Actions.loginconsumer()
        }
      })
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  }

因此,如果您是Role_Plus,则无法注销。

Starting.js从Utente调用“ getUtenteLoggato”:

 static async getUtenteLoggato() {
    try {
      return await AsyncStorage.getItem("@UtenteLoggato");
    } catch (error) {
      console.log(error.message);
      return null;
    }
  }

1 个答案:

答案 0 :(得分:0)

您可以使用简单的三元条件通过检查user1状态来确定其状态:

       <Scene
            key="homepageutente"
            component={HomepageUtente}
            type="reset"
            leftTitle="Home"
            leftButtonTextStyle={{color: "#ffffff"}}
            onLeft={() => Actions.authentication()}
            rightButtonTextStyle={{color: "#ffffff"}}
            rightTitle={user === "user1" ? "Logout" : ""}
            onRight={user === "user1" ? () => App.logout() : () => {}}
            navigationBarStyle={{ backgroundColor: "#64c7c0" }}
            />