用旧的React Native替换旧的StackNavigator

时间:2017-08-04 13:17:52

标签: react-native

我正在尝试替换当用户通过“LogIn”阶段时不应使用的StackNavigator。但我无法弄清楚如何做到这一点,我已经尝试过重置功能,但无法按需要工作。

如何用旧的替换旧的StackNavigator并使用它?如下面的示例所示,系统以一个堆栈开始,并且在按下按钮后不应使用该堆栈。

以索引代码为例:

    import React, { Component } from 'react';
import { AppRegistry, Button, StyleSheet, Text, View } from 'react-native';
import { NavigationActions, StackNavigator } from 'react-navigation';
import App from './App';

class StackNavigatorStuff extends Component {

    static navigationOptions = {
        title: 'Welcome',
    };

  render() {
    return (
      <View style={styles.container}>
        <Text>
          Welcome to this app
        </Text>
        <Text style={styles.instructions}>
          Some login functions to become
        </Text>
        <Button title = 'Temp Login Function' onPress={() => /*Here should the  stack be replaced with App.MainStackNav*/})}/>
      </View>
    );
  }
}

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({routeName: 'Home'})
  ]
});

const StackNavigatorLab = StackNavigator({
  Home: { screen: StackNavigatorStuff },
  //More to be
});

AppRegistry.registerComponent('StackNavigatorLab', () => StackNavigatorLab);

App.MainStackNav

 const StackNavigatorLab = StackNavigator({

  Home: { screen: MainScreenNavigator },
  Chat: { screen: ChatNavigator },
  NavigationList: { screen: MyNotificationsScreen },
});

1 个答案:

答案 0 :(得分:1)

导航只能在定义的路由器中进行,因此您应该有一个导航器包装您想要切换的屏幕。

index文件的StackNavigatorLab中,将App.MainStackNav添加为路线。即。

const StackNavigatorLab = StackNavigator({
  Home: { screen: StackNavigatorStuff },
  Main: { screen: App.MainStackNav },
...
});

然后你的重置动作看起来像

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Main' })
  ]
});

成功登录后,使用navigation.dispatch调度此重置操作。

如果要分隔两组StackNavigation屏幕,则可以将整体StackNavigator作为根,只包装Login屏幕集和Main屏幕集。