我正在使用 react-navigation 来导航我的 android 应用程序,我将 react-navigation 与 redux 一起使用。
应用程序.js:
const AppRouteConfigs = {
Home: {
screen: HomeView
},
Completed: {
screen: CompletedView
}
}
export const AppNavigator = TabNavigator(AppRouteConfigs,{
tabBarPosition: 'bottom',
tabBarOptions: {
showIcon: true
}
});
@connect(state=>({
nav: state.nav
}))
class App extends Component {
componentDidMount(){
SplashScreen.hide();
}
render(){
return (
<AppNavigator navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav
})}/>
)
}
}
export default App;
减速器:
const initialNavState = {
index: 1,
routes: [
{key: 'InitB',routeName: 'Completed'},
{key: 'InitA',routeName: 'Home'}
]
}
export default function(state=initialNavState,action){
switch(action.type) {
case 'Login':
return AppNavigator.router.getStateForAction(NavigationActions.back(),state);
case 'Logout':
return AppNavigator.router.getStateForAction(NavigationActions.navigate({routeName: 'Completed'}),state)
default:
return state;
}
}
主页视图:
@connect(state=>({
todos: state.todos
}))
export default class HomeView extends Component{
constructor(props){
super(props);
}
static navigationOptions = {
tabBarLabel: 'Home View',
tabBarIcon: ({tintColor})=>(
<Icon name="rocket" size={15} color="#900" />
)
}
handleClick = ()=>{
this.props.dispatch(NavigationActions.navigate({routeName: 'Completed'}))
}
render(){
return (
<View>
<Text>Hey,I'm home page</Text>
<Button onPress={this.handleClick} title="go to completed"/>
<Icon name="rocket" size={30} color="#900" />
</View>
)
}
}
在 Home 视图中,我想导航到 Completed 视图,
this.props.dispatch(NavigationActions.navigate({routeName: 'Completed'}))
不起作用,我不知道为什么。
this.props.navigation.dispatch(NavigationActions.navigate({routeName: 'Completed'}))
也不行。