React Native - NavigationActions.navigate() 不在 redux 中导航

Posted

技术标签:

【中文标题】React Native - NavigationActions.navigate() 不在 redux 中导航【英文标题】:React Native - NavigationActions.navigate() not navigating from within redux 【发布时间】:2018-08-30 13:17:59 【问题描述】:

我有两个导航器,一个是stackNavigator,另一个是drawerNavigator。 我想要做的是调度一个动作并且登录成功并将用户重定向到抽屉导航器。我使用了反应导航。 我所做的是在 saga 中发送动作登录成功。 使用NavigationActions.navigate( routeName: 'drawerStack' ) 调度操作。 该操作成功调度,但它没有导航到drawerNavigator,如下图所示。我做错了什么?

saga.js

function* watchLoginRequest() 
  while (true) 
    const  state  = yield take(LOGIN_REQUEST);

    try 
      const payload = 
        state
      ;
      const response = yield call(loginCall, payload);
      yield put(loginSuccess(response));
      yield setUser(response.user);
      yield put(NavigationActions.navigate( routeName: 'drawerStack' ));
     catch (err) 
      yield put(loginFailure(err.status));
    
  

drawerNavigation.js

// drawer stack
const DrawerStack = DrawerNavigator(
  testComponent:  screen: TestComponent ,
);

const DrawerNav = StackNavigator(
  drawerStack:  screen: DrawerStack 
, 
  headerMode: 'float',
  navigationOptions: ( navigation ) => (
    headerStyle:  backgroundColor: 'green' ,
    title: 'Logged In to your app!',
    headerLeft: <Text onPress=() => navigation.navigate('DrawerOpen')>Menu</Text>
  )
);

export default DrawerNav;

loginNavigation.js

// login stack
const LoginStack = StackNavigator(

  startScreen:  screen: StartScreen ,
  loginScreen:  screen: LoginScreen ,
  personalInformation:  screen: PersonalInformation ,
  vehicleInformation:  screen: VehicleInformation ,
  availability:  screen: Availability ,
  selectRegisteration:  screen: SelectRegisteration ,
  serviceAddress:  screen: ServiceAddress ,

, 
  headerMode: 'none',
  transitionConfig: TransitionConfiguration

);


export default LoginStack;

ReduxNavigation.js

class ReduxNavigation extends React.Component 
  constructor(props) 
    super(props);
    const  dispatch, nav  = props;
    const navigation = ReactNavigation.addNavigationHelpers(
      dispatch,
      state: nav
    );
    this.state = 
      loggedInStatus: false,
      checkedSignIn: false
    ;
  

  componentWillMount() 
    isSignedIn()
      .then(res => 
        if (res !== null) 
          this.setState(
            loggedInStatus: true,
            checkedSignIn: true
          );
         else 
          console.log(res);
        
      )
      .catch(err => console.log(err));
  

  render() 
    return <LoginNavigation navigation=this.navigation />;
  


const mapStateToProps = state => ( nav: state.nav );
export default connect(mapStateToProps)(ReduxNavigation);

【问题讨论】:

您期待什么?导航到TestComponent 或显示抽屉?显示你想要的抽屉.navigate('DrawerOpen') 实际上我正在尝试导航到 TestComponent。 如果我 .navigate('DrawerOpen') 也不会打开抽屉 您将抽屉导航器添加到导航堆栈的哪个位置?您要么没有提供所有代码,要么没有正确设置导航堆栈。 DrawerNavigator 如果您希望能够导航到它的任何路径,则需要将其添加到堆栈中 就个人而言,我发现导航有点混乱。我建议从没有redux 的基本设置开始并了解这一点。然后你可以添加redux。 AFAIK,您无法即时修改导航堆栈,这听起来像是您可能正在尝试做的事情。见github.com/react-navigation/react-navigation/issues/71 【参考方案1】:

要导航到TestComponent,您希望您的routeNametestComponent,而不是抽屉堆栈。您导航到特定屏幕,而不是导航组件。

【讨论】:

我也尝试导航到 testComponent 和一些 routeNames,如 selectRegisteration 等,但它的作用相同,它没有导航到任何一个屏幕

以上是关于React Native - NavigationActions.navigate() 不在 redux 中导航的主要内容,如果未能解决你的问题,请参考以下文章

使用 wix@react-native-navigation 运行 react-native 应用程序时出错

React Navigation 与 React Native Navigation [关闭]

在带有 wix/react-native-navigation 的模态中使用 react-native-gesture-handler (RNGH)

使用像 React Navigation 这样的基于 JS 的导航解决方案而不是使用像 Wix 的 React Native Navigation 这样的 Native Navigation 的缺点?

wix react native navigation registerComponent React未定义

react-native-navigation 底部标签样式