我刚刚陷入react-native,并且在找到令牌时需要一些帮助导航到受保护的屏幕。我应该在应用程序加载中寻找令牌?如何在不多次调用导航的情况下导航用户一次?我遇到的问题是我正在检查组件挂载上的令牌,它嵌套在堆栈中。如果我导航到堆栈的另一部分,则再次调用该函数,我无法导航。我可以在堆栈外检索令牌,但后来导航时遇到问题,因为我需要在屏幕组件中传递props.navigate。找到令牌和进行导航的推荐方法是什么?
App.js
.....
def setup() {
..
mockDomain(MyObject,[
[
action : 'ACT1',
reason : 'REAS1',
description : 'First reason'
],
[
action : 'ACT2',
reason : 'REAS2',
description : 'Second reason'
]
])
def myObject = MyObject.first()
}
...
RootContainer.js
...
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import RootContainer from './screens/RootContainer';
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<RootContainer />
</Provider>
);
}
}
WelcomeScreen.js
...
render() {
const MainNavigator = createBottomTabNavigator({
welcome: { screen: WelcomeScreen },
auth: { screen: AuthScreen },
main: {
screen: createBottomTabNavigator({
map: { screen: MapScreen },
deck: { screen: DeckScreen },
review: {
screen: createStackNavigator({
review: { screen: ReviewScreen },
settings: { screen: SettingsScreen }
})
}
})
}
// Route Configuration for Initial Tab Navigator
}, {
// do not instantly render all screens
lazy: true,
navigationOptions: {
tabBarVisible: false
}
});
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
答案 0 :(得分:1)
我建议,不要在redux中存储导航状态。 只需在找到令牌或用户登录时进行导航。
如果您仍想使用redux或只是想对props更改做出反应,那么方法是使用一些Redirect Component,并仅在令牌从无变化时呈现它。您可以从react-router here了解此类实现。我认为React Navigation没有这样的实现。
当您使用React Navigation时,我建议您查看文档,因为我认为它可以解决您遇到的问题。 https://reactnavigation.org/docs/en/auth-flow.html