反应本机路由器 Actions.SCENE 什么都不做
react native router Actions.SCENE doing nothing
我正在向我的应用程序添加一个简单的登录屏幕,但是一旦用户通过身份验证我就无法调用 Actions.home。
我有一个按钮,按下时会调用一个函数来连接到服务器并获取身份验证状态,成功后,我会调用 Actions.home。但没有任何反应。没有错误或警告。什么都没有。
我已经尝试了它的所有形式,Actions.home,Actions.home(),{Actions.home},将Actions.home保存为构造函数中的状态,然后使用状态, ... 没有任何效果。
但是在我的其他屏幕中,当我在 onPress 道具中调用 Actions.somewhere 时它起作用了。
我阅读了这里的大部分问题,以及 Whosebug 上的问题(不是很多),但无法理解哪里出了问题。我使用了所有建议的解决方案,但没有。
当我 console.log(Actions.home) 时,这就是我所看到的:
enter image description here
这是我的脚本:
router.js
<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
,因为它是一个相邻的场景。
这是我使用 react-native-router-flux
构建的一个简单示例来测试它。
<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
它不起作用。
希望这对您有所帮助。 :)
你应该打电话给Actions.tabsRoot 并使家庭场景初始。
<Scene key="home" title="saba" component={Home} navBar={NavBar} initial/>
我正在向我的应用程序添加一个简单的登录屏幕,但是一旦用户通过身份验证我就无法调用 Actions.home。
我有一个按钮,按下时会调用一个函数来连接到服务器并获取身份验证状态,成功后,我会调用 Actions.home。但没有任何反应。没有错误或警告。什么都没有。
我已经尝试了它的所有形式,Actions.home,Actions.home(),{Actions.home},将Actions.home保存为构造函数中的状态,然后使用状态, ... 没有任何效果。
但是在我的其他屏幕中,当我在 onPress 道具中调用 Actions.somewhere 时它起作用了。
我阅读了这里的大部分问题,以及 Whosebug 上的问题(不是很多),但无法理解哪里出了问题。我使用了所有建议的解决方案,但没有。
当我 console.log(Actions.home) 时,这就是我所看到的: enter image description here
这是我的脚本:
router.js
<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
,因为它是一个相邻的场景。
这是我使用 react-native-router-flux
构建的一个简单示例来测试它。
<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
它不起作用。
希望这对您有所帮助。 :)
你应该打电话给Actions.tabsRoot 并使家庭场景初始。
<Scene key="home" title="saba" component={Home} navBar={NavBar} initial/>