首页 > 解决方案 > NavBar React-Native 中的文本

问题描述

我发现导航栏中的文本有问题。

我使用路由器通量。

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

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

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

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

应用程序.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

-->登录加号

我使用单击一个按钮后加载的白页来检查您是否已登录以及您是哪种用户。

启动.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;
    }
  }

标签: javascriptandroidreact-native

解决方案


您可以使用简单的三元条件通过检查 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" }}
            />

推荐阅读