从嵌套导航包装组件和渲染标题导航

Question

史诗

在我的应用程序中，我有 Tab Navigator ，其中一个屏幕名为员工。在EmployeesScreen上，我有一个员工列表和一个按钮＆＃34; Invite＆＃34;哪个将我重定向到InviteEmployeeWizardForm （inviteEmployee键）。 InviteEmployeeWizardForm在同一级别上声明＆＃34;＆＃34;作为TabNavigation（两者都是 RootStackNavigator 的一部分），因为我希望它与我的TabNavigation重叠。

InviteEmployeeWizardForm旨在成为一个堆栈导航器，其中每个屏幕代表向导形式中的一些步骤。此外，InviteEmployeeWizardForm是一个 NavigatorWrappingScreen （根据documentation），因为在每个表单步骤中我都有一些常见的组件，比如一个按钮，我想留在原地，而表单体由不同的屏幕表示将转变。

图

代码

Tab导航器中的员工屏幕

const TabNavigation = TabNavigator({
    // …
    employees: EmployeesScreen /** 1 */
    // …
})


/** 1 */
class EmployeesScreen extends Component {
  render() {
    return <Button onPress={()=>this.props.navigation.navigate('inviteEmployee')}>Invite</Button>
  }
}

表单导航器     / ** 5 * /

const routeConfigs={ 
    step0:{
        screen: DataScreen,   /** 2 */
        //params: {
        //  title: 'Information'   /** 5b */
        //}
    },
    step1:{
        screen: PrivilegesScreen   /** 3*/
    }
};

const navigationConfigs = { 
    navigationOptions: { header:null }, /** 5a */
    initialRouteName:  'step0',
};

const WizardFormNavigation = StackNavigator(routeConfigs,navigationConfigs);  /** 5 */

表单步骤组件和标题的重复声明（仅以这种方式工作）：

class DataScreen  extends Component {
static navigationOptions = {
    /** 6 */
    header: props => 
        <NavHeader navigation={props.navigation} title={'Information'} labels={['Information','Privileges']} activeIndex={0}/>
    }
    // ..
}
class PrivilegesScreen  extends Component {
    static navigationOptions = {
        /** 6 */
        header: props => 
            <NavHeader navigation={props.navigation} title={'Privileges'} labels={['Information','Privileges']} activeIndex={1}/>
    }
    // ..
}

包装表单导航器的屏幕

/** 4*/
class InviteEmployeeWizardForm extends Component  {
static navigationOptions={header:null};

    // …

    render(){

    return(
        <Viewstyle={{flex:1}}>
            { /** 5 */ }
            <WizardFormNavigation navigation = {this.props.navigation} />

            <Button onPress={this.nextStep} }>Invite</ButtonPrimary>
        </View>
        )
    }
}

InviteEmployeeWizardForm.router = WizardFormNavigation .router;

问题：

1. 如何从InviteEmployeeWizardForm（step1）导航到EmployeesScreen？

   我试过了什么？ （在InviteEmployeeWizardForm nextStep方法中）

   • 1.A

     const redirectAction = NavigationActions.reset({
           index: 0,
           actions: [NavigationActions.navigate({
             routeName: 'employees'
           }) ]
         });
     
     this.props.navigation.dispatch(redirectAction);
     

     我明白：没有为关键员工定义路线。必须是以下之一：step0，step1。

   • 1.B。

     this.props.navigation.navigate('employees');
     

     令人惊讶的是，这有效（不知道为什么？）但我想重置导航（pop InviteEmployeeWizardForm步骤），而不是将此屏幕放在堆栈顶部。

   • 1.C。

     this.props.navigation.goBack('step0');
     

     无效

2. 为什么当我尝试将自定义标题（/ ** 6 * /）提取到/ ** 5a * /并使用参数标题（navigation.state.params.title而不是固定值）提供标题道具时定义在/ ** 5b * /它没有看到任何参数？ 它似乎在创建导航器时定义的navigationOptions中获得的导航道具不同于组件级别的导航道具，但是为什么它甚至可以正常运行？