反应本机 StackNavigator initialRouteName
React Native StackNavigator initialRouteName
在 React Native Navigation 库中 'react-navigation'
如何通过 AsyncStorage 设置 StackNavigator initialRouteName?
function getInitialScreen() {
AsyncStorage.getItem('initialScreen')
.then(screenName => {
return (screenName)
? screenName
: 'Login';
})
.catch(err => {});
}
const Navigator = StackNavigator({
Splash: { screen: Splash },
Login: { screen: Login },
WebPage: { screen: WebPage }
}, {
initialRouteName: getInitialScreen()
});
我也遇到过这个问题,目前唯一好的解决办法就是下面这个例子:
const RootNavLogged = StackNavigator({
...
},{
initialRouteName : 'Home'
});
const RootNav = StackNavigator({
...
},{
initialRouteName : 'Login'
});
class App extends Component {
render(){
if (this.props.userLogged == true ){
return (
<RootNavLogged/>
)
} else {
return(
<RootNav/>
)
}
}
}
来自 的完整解决方案:
const Navigator = StackNavigator({
InitialScreen: {
screen: InitialScreen
},
Splash: {
screen: Splash
},
LanguageStartup: {
screen: LanguageStartup
},
Login: {
screen: Login
},
Register: {
screen: Register
}
}, {initialRouteName: 'InitialScreen'});
export default Navigator;
我的初始屏幕
import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as GeneralPref from './../preferences/GeneralPref'
import Log from './../utils/Log'
import {AsyncStorage, View} from 'react-native';
import * as Pref from './../preferences/Preferences';
import {NavigationActions} from 'react-navigation'
const TAG = 'InitialScreen'
class InitialScreen extends Component {
static navigationOptions = {
header: false
};
componentWillMount() {
Log(TAG+' Mount')
const {navigate} = this.props.navigation;
GeneralPref
.getInitialScreen()
.then(value => {
Log(TAG+' Initial',value)
if (value != null) {
Log(TAG+' Initial',value)
return value
} else {
Log(TAG+' No Initial','Splash')
return 'Splash'
}
})
.then(screenName => this.props.navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({routeName: screenName})]
})))
.catch(err => {
Log(TAG+' Initial Error',value)
this.props.navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({routeName: 'Splash'})]
}))
});
}
render() {
return null;
}
}
export default InitialScreen;
然后在语言屏幕
changeLanguageTo(language) {
Log(TAG+'Change Language', "Change Language To: " + language.code);
// Log(TAG, 'Current State');
Log(TAG+' Language State', language);
GeneralPref.setInitialScreen('Login');
this
.props
.actions
.changeLanguage(language);
I18nManager.forceRTL(true);
// Immediately reload the React Native Bundle
RNRestart.Restart();
};
根据您的要求,使用多个 Route 更改 InitialRouteName。我已经以这种方式工作了。
创建 router
文件导入所有屏幕。
导出一个无状态函数调用它 createRootNavigator
参数为 (load="<Your initial screen>")
export const createRootNavigator = (load="<Your Initial Screen>") => {
return stackNavigator({
Initialize: {
screen: Initialize,
},
Main: {
screen: Main,
},
{
initialRouteName: load
}
})
}
在您的主应用中,
state = {
load: "<Your Initial Screen>"
}
例如:
state = {
load: "Initialize" // value is string
}
在componentDidMount()
方法中相应地设置状态。最后渲染新布局。
render() {
const Layout = createRootNavigator(this.state.load);
<Layout />
}
以上方法对我来说效果很好。希望对大家有帮助。
在 React Native Navigation 库中 'react-navigation'
如何通过 AsyncStorage 设置 StackNavigator initialRouteName?
function getInitialScreen() {
AsyncStorage.getItem('initialScreen')
.then(screenName => {
return (screenName)
? screenName
: 'Login';
})
.catch(err => {});
}
const Navigator = StackNavigator({
Splash: { screen: Splash },
Login: { screen: Login },
WebPage: { screen: WebPage }
}, {
initialRouteName: getInitialScreen()
});
我也遇到过这个问题,目前唯一好的解决办法就是下面这个例子:
const RootNavLogged = StackNavigator({
...
},{
initialRouteName : 'Home'
});
const RootNav = StackNavigator({
...
},{
initialRouteName : 'Login'
});
class App extends Component {
render(){
if (this.props.userLogged == true ){
return (
<RootNavLogged/>
)
} else {
return(
<RootNav/>
)
}
}
}
来自
const Navigator = StackNavigator({
InitialScreen: {
screen: InitialScreen
},
Splash: {
screen: Splash
},
LanguageStartup: {
screen: LanguageStartup
},
Login: {
screen: Login
},
Register: {
screen: Register
}
}, {initialRouteName: 'InitialScreen'});
export default Navigator;
我的初始屏幕
import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as GeneralPref from './../preferences/GeneralPref'
import Log from './../utils/Log'
import {AsyncStorage, View} from 'react-native';
import * as Pref from './../preferences/Preferences';
import {NavigationActions} from 'react-navigation'
const TAG = 'InitialScreen'
class InitialScreen extends Component {
static navigationOptions = {
header: false
};
componentWillMount() {
Log(TAG+' Mount')
const {navigate} = this.props.navigation;
GeneralPref
.getInitialScreen()
.then(value => {
Log(TAG+' Initial',value)
if (value != null) {
Log(TAG+' Initial',value)
return value
} else {
Log(TAG+' No Initial','Splash')
return 'Splash'
}
})
.then(screenName => this.props.navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({routeName: screenName})]
})))
.catch(err => {
Log(TAG+' Initial Error',value)
this.props.navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({routeName: 'Splash'})]
}))
});
}
render() {
return null;
}
}
export default InitialScreen;
然后在语言屏幕
changeLanguageTo(language) {
Log(TAG+'Change Language', "Change Language To: " + language.code);
// Log(TAG, 'Current State');
Log(TAG+' Language State', language);
GeneralPref.setInitialScreen('Login');
this
.props
.actions
.changeLanguage(language);
I18nManager.forceRTL(true);
// Immediately reload the React Native Bundle
RNRestart.Restart();
};
根据您的要求,使用多个 Route 更改 InitialRouteName。我已经以这种方式工作了。
创建 router
文件导入所有屏幕。
导出一个无状态函数调用它 createRootNavigator
参数为 (load="<Your initial screen>")
export const createRootNavigator = (load="<Your Initial Screen>") => {
return stackNavigator({
Initialize: {
screen: Initialize,
},
Main: {
screen: Main,
},
{
initialRouteName: load
}
})
}
在您的主应用中,
state = {
load: "<Your Initial Screen>"
}
例如:
state = {
load: "Initialize" // value is string
}
在componentDidMount()
方法中相应地设置状态。最后渲染新布局。
render() {
const Layout = createRootNavigator(this.state.load);
<Layout />
}
以上方法对我来说效果很好。希望对大家有帮助。