React Native-如何导航到多屏幕堆栈导航器？

Question

我正在开发一个具有多级屏幕的应用程序，在第三级上，我需要在不同条件下导航到三个不同的屏幕。

像

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'）

在打开这三个屏幕后，我应该如何打开它。