本文介绍了反应原生路由器Actions.SCENE什么都不做的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在为我的应用添加一个简单的登录屏幕,但是一旦用户通过身份验证,我就无法调用Actions.home。

I'm adding a simple login screen to my app, but I'm not able to call Actions.home once the user is authenticated.

我有一个按下按钮,调用函数连接到服务器并获取auth状态,成功时,我调用Actions.home。但没有任何反应。没有错误或警告。什么都没有。

I have a button that when pressed, calls a function to connect to the server and get auth status, and when successful, I call Actions.home. but nothing happens. no error or warning. just nothing.

我已经尝试了它的所有形式,Actions.home,Actions.home(),{Actions.home},将Actions.home保存为状态构造函数,然后使用状态,...没有任何工作。

I have tried all forms of it, Actions.home, Actions.home(), {Actions.home}, saving Actions.home as state in the constructor and then using state, ... nothing worked.

但在我的其他屏幕中,当我在onPress道具中调用Actions.somewhere时,它可以工作。

but in my other screens when I call Actions.somewhere in onPress props it works.

我在这里阅读了大部分问题,关于StackOverflow的问题(没有很多),但无法理解什么是错的。我使用了所有建议的解决方案,但没有。

I read most of the issues here, and questions on StackOverflow(there weren't a lot), but couldn't understand what's wrong. I used all the solutions suggested everywhere, but nothing.

当我在console.log(Actions.home)时,我看到的是:

when I console.log(Actions.home), it's what I see:enter image description here

<Scene key="root">
        <Scene key="login" title="login"  component={Login} hideTabBar hideNavBar initial />
        <Scene key="tabsRoot" tabs tabBarStyle={[styles.tabBar, styles.tabBarShadow]} >
            <Scene key="tab_home" iconName="home" icon={TabBarItem} >
                <Scene key="home" title="saba" component={Home} navBar={NavBar} />
                <Scene key="campaignHome" title="campaign" hideTabBar component={Campaign} navBar={NavBar} direction="vertical" />
            </Scene>
            ......
        </Scene>
</Scene>
export
default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      phone: '',
      shouldLogin: false,
      shouldRegister: false,
      error: false,
    };
    this._checkAuth = this._checkAuth.bind(this);
    this._onNumberChanged = this._onNumberChanged.bind(this);
    this._isRegistered = this._isRegistered.bind(this);
    this._isNotRegistered = this._isNotRegistered.bind(this);
  }

  async _isRegistered(response) {
    var user = response.payload.user;
    this.state = {
      name: user.name,
      phone: user.phone,
      shouldLogin: true,
    };

    Actions.home;
  }

  _isNotRegistered(response) {
    var error = response.error;
    if (!error.code === NOT_REGISTERED_CODE) {
      this.setState({
        shouldLogin: false,
        shouldRegister: false,
        error: true,
      })
      throw new AuthException("server responded with unrecognised object");
    }

    this.setState({
      shouldLogin: false,
      shouldRegister: true,
      error: false,
    })
  }

  _checkAuth() {

    var {
      phone
    } = this.state;

    var data = {
      phone: phone,
    }

    let url = buildQuery(AuthTypes.LOGIN, data);

    console.log("usl: " + url);

    //connect to server
    ....
    if(response.success) {
      this._isRegistered(response);
    } else {
      this._isNotRegistered(response);
    }
  }

  _onNumberChanged(event) {
    var phone = event.nativeEvent.text;
    this.setState({
      phone: phone,
    });
  }

  render() {
      return ( < View style = {
            [styles.container]
          } >
          < View style = {
            [styles.imgContainer]
          } >
          < Image source = {
            require('./../Images/login.png')
          }
          width = "200"
          height = "200" / >
          < /View>
                <View style={[styles.form]}>
                    <View style={[styles.inputContainer]}>
                        <TextInput style={[styles.input]} placeholder="enter your phone number" onChange={ this._onNumberChanged } maxLength={12} / >
          < /View>
                    <TouchableWithoutFeedback onPress={ this._checkAuth } >
                        <View style={[styles.submitContainer]}>
                            <View>
                                <Text style={[styles.text, styles.loginButton]}>login</Text >
          < /View>
                        </View >
          < /TouchableWithoutFeedback>
                </View >
          < /View>
        )
    }
}

推荐答案

我认为问题是你试图从登录到嵌套在另一个场景内的场景。从登录环境中,您可以使用 Actions.tabsRoot ,因为它是相邻场景。

I think the problem is that you are trying to go from login to a Scene which is nested inside of another scene. From the context of login, you would have Actions.tabsRoot available to you since it is an adjacent scene.

这是我使用 react-native-router-flux 构建的一个快速示例来测试它。

Here is a quick example I built using react-native-router-flux to test this.

<Router>
   <Scene key='pageOne' component={PageOne} initial={true}/>
   <Scene key='home'>
     <Scene key='pageTwo' component={PageTwo}/>
     <Scene key='pageThree' component={PageThree}/>
   </Scene>
</Router>

pageOne 我可以致电 Actions.home 并转换到该堆栈中的第一个场景或该堆栈中启用了 initial 的场景。但是,如果我尝试从 pageOne 调用 Actions.pageTwo ,则无效。

From pageOne I can call Actions.home and it transitions to the first Scene in that stack or to the Scene in that stack that has initial turned on. However, If I try calling Actions.pageTwo from pageOne it does not work.

希望这会有所帮助。 :)

Hope this helps. :)

这篇关于反应原生路由器Actions.SCENE什么都不做的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-30 12:10