Question

我使用react-navigation导航我的Android应用程序，我使用react-navigation和redux。

App.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;
    }
}

HomeView：

@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>
        )
    }
}

在主页视图中，我想要导航到已完成视图，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={() => navigate('Completed')}
      title='Completed'
    />
  </View>
)

}

无法使用反应导航进行导航

1 个答案: