React native - Как переходить на несколько экранов стека навигатора?

Question

Я занимаюсь разработкой приложения, которое имеет экраны на нескольких уровнях, где на 3-м уровне мне необходимо перейти к трем различным экранам в разных условиях.

Как

OrderDetail
             -> EventDetail
             -> ScoreDetail
             -> UserDetail
                          -> CreditCard
                                       -> Success

и стекВот как это

const ScoreStack = createStackNavigator({
  ScoreCategory: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        headerLeft: (
          <MaterialIcons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="menu"
            size={30} color="#ffffff"
          />
        ),
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  },
  DetailScoreScreen: {
    screen: Screen7,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  }
},
  {
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  });

const EventsStack = createStackNavigator({
  EventCategory: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        headerLeft: (
          <MaterialIcons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="menu"
            size={30} color="#ffffff"
          />
        ),
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  },
  DetailEventsScreen: {
    screen: Screen8,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  }
},
  {
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  });// 

const SuccessScreenStack = createStackNavigator({
  FoodSize: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerLeft: (
          <MaterialIcons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="menu"
            size={30}
          />
        )
      };
    }
  },
  FinishDetail: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  }
},
  {
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  });

const CreditCardScreenStack = createStackNavigator({
  FoodSize: {
    screen: CreditCardScreen,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerLeft: (
          <MaterialIcons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="menu"
            size={30}
          />
        )
      };
    }
  },
  OrderSuccessDetail: {
    screen: SuccessScreenStack,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  }
},
  {
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  });

const UserDetailStack = createStackNavigator({
  FoodSize: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerLeft: (
          <MaterialIcons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="menu"
            size={30}
          />
        )
      };
    }
  },
  CreditCardDetail: {
    screen: CreditCardScreenStack,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  }
},
  {
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  });

const OrderDetailStack = createStackNavigator({
  FoodSize: {
    screen: Screen6,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerLeft: (
          <MaterialIcons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="menu"
            size={30}
          />
        )
      };
    }
  },
  UserDetail: {
    screen: UserDetailStack,
    navigationOptions: ({ navigation }) => {
      return {
        // headerTitle: 'Food Category',
        header: null,
        headerRight: (
          <Icons
            onPress={() => navigation.openDrawer()}
            style={{ paddingLeft: 10 }}
            name="dots-vertical"
            size={30} color="#ffffff"
          />
        ),
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#FF0000"
        }
      };
    }
  }
},
  {
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  });

На экране OrderDetail Я должен идти в трех направлениях, в зависимости от условий

Подобные действия по навигации.

actionOnRow = (item) => {
    this.props.navigation.navigate('UserDetail')
  }

Пожалуйста, объясните мне, каксоздать стек для поддержки этой структуры / Уровень экранов.Как будто я пишу this.props.navigation.navigate ('UserDetail')

Как мне сделать, чтобы открыть любой из этих трех экранов после него.