reactjs - 无法使用 react-navigation 进行导航

Question

我正在使用 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'}))

也不行。

Answer 1

试试这个：

render() {
    const { navigate } = this.props.navigation
    return (
        <View>
            <Button
                onPress={() => navigation.navigate('Completed')}
                title='Completed'
            />
        </View>
    )
}