Question

我正在努力使我的本机应用程序中的动态导航正常工作。

这是我AppNavigation.js上的内容：

import {
  createDrawerNavigator,
  createStackNavigator,
  createSwitchNavigator, DrawerItems, SafeAreaView
} from 'react-navigation'
import LoginScreen from '../screens/LoginScreen'
import ProfileScreen from "../screens/ProfileScreen";
import TemplatesScreen from "../screens/TemplatesScreen";
import AuthLoadingScreen from "../screens/AuthLoadingScreen";
import React from "react";
import {Button, Icon} from "native-base";
import {ScrollView} from "react-native";
import NewFilmScreen from "../screens/NewFilmScreen";
import SettingsScreen from "../screens/SettingsScreen";
import LogoutScreen from "../screens/LogoutScreen";
import TemplateWorkflowContainer from "./TemplateWorkflowContainer";

const WorkflowContainer = createStackNavigator(
  {
    TemplateContainer: {
      screen: TemplateWorkflowContainer
    }
  },
  {
    headerMode: 'none',
  }
);

// drawer stack
const AppNavigation = createDrawerNavigator({
    TemplatesScreen: {screen: TemplatesScreen},
    NewFilm: {screen: NewFilmScreen},
    ProfileScreen: {screen: ProfileScreen},
    SettingsScreen: {screen: SettingsScreen},
    LogoutScreen: {screen: LogoutScreen}
  },
  {
    drawerBackgroundColor: '#ff4559',
    // Default config for all screens
    headerMode: 'none',
    initialRouteName: 'TemplatesScreen',
    contentOptions: {
      activeTintColor: '#fff',
      inactiveTintColor: '#fff',
      itemsContainerStyle: {
        marginVertical: 0,
      },
      itemStyle: {
        flexDirection: 'row-reverse',
      },
      iconContainerStyle: {
        opacity: 0.8,
      }
    },
    contentComponent: props =>
      <ScrollView>
        <SafeAreaView forceInset={{top: 'always', horizontal: 'never'}}>
          <Button transparent>
            <Icon name='close' style={{fontSize: 40, color: 'white'}} onPress={() => {
              props.navigation.closeDrawer()
            }}/>
          </Button>
          <DrawerItems {...props} />
        </SafeAreaView>
      </ScrollView>
  });

const WrapperStack = createStackNavigator({
    AppDrawer: AppNavigation,
    WorkflowContainer: WorkflowContainer
  },
  {
    headerMode: 'none'
  }
);

// Manifest of possible screens, when the user sign in the loginStack will be unmount to never logged out the user with
// the back button
const PrimaryNav = createSwitchNavigator({
  AuthLoading: {screen: AuthLoadingScreen},
  Auth: {screen: LoginScreen},
  App: {screen: WrapperStack}
}, {
  initialRouteName: 'AuthLoading'
});

export default PrimaryNav;

我的抽屉很好。问题出在WorkflowContainer上。这是这样的导航：

import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import TemplateWorkflowNavigator from "./TemplateWorkflowNavigator";

export default class TemplateWorkflowContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: null
    };
  }

  generateScreens = data => {
    const stack = {};
    stack["0"] = {
      screen: TemplateWorkflowNavigator,
      navigationOptions: () => ({
        title: data.title,
        gesturesEnabled: true
      })
    };
    for (let i = 0; i < data.scenes.length; i++) {
      let screenNumber = data.scenes[i].priority + 1;
      stack[screenNumber] = {
        screen: TemplateWorkflowNavigator,
        navigationOptions: () => ({
          title: data.scenes[i].name,
          gesturesEnabled: true
        })
      };
    }
    return stack;
  };

  renderStackNavigo = aTemplate => {
    const TemplateStackNavigor = createStackNavigator(
      this.generateScreens(aTemplate), {headerMode: 'none'}
    );
    return <TemplateStackNavigor screenProps={aTemplate}/>;
  };

  render() {
    return this.props.navigation.state.params.json && this.renderStackNavigo(this.props.navigation.state.params.json);
  }
}

它是动态的，在this.props.navigation.state.params.json中，我得到了这样的JSON：

{
    "id": 5,
    "title": "toto",
    "dolly": 74,
    "name": "toto",

    "conditions": [
        {
            "name": "Calm",
            "desc": "test",
            "priority": 0
        }
    ],
    "medias": [
        {
            "path": "a_path_here",
            "mobile_path": "a_path_here",
            "size": 80851,
            "type": "preview"
        }
    ],
    "scenes": [
        {
            "name": "Intro",
            "priority": 0,
            "conditions": [
                {
                    "name": "smile",
                    "desc": "test",
                    "priority": 0
                }
            ],
            "medias": [
                {
                    "path": "a_path_here",
                    "mobile_path": "a_path_here",
                    "size": 80851,
                    "type": "preview"
                }
            ],
            "elements": [
                {
                    "name": "Name",
                    "priority": 0,
                    "type": "text",
                }
            ]
        }
    ]
}

当我打电话给它

this.props.navigation.navigate("TemplateContainer", { json: path });

但是我有这个警告：

您应该只在应用中显式呈现一个导航器，而另一个导航器应通过将其包含在该导航器中来呈现。

我尝试了很多事情，但是我对本机响应非常陌生，没有任何效果。

如何使该导航正常运行而没有警告？我必须应用哪些更改？

Answer 1

根据我的假设，您的TemplateWorkflowContainer将如下所示

export default class TemplateWorkflowContainer extends Component {
  static router = null;
  ...
  renderStackNavigo = aTemplate => {
    const TemplateStackNavigor = createStackNavigator(
      this.generateScreens(aTemplate), {headerMode: 'none'}
    );
    TemplateWorkflowContainer.router = TemplateStackNavigor.router;
    return <TemplateStackNavigor screenProps={aTemplate}/>;
  };
  ...
}

我的React导航是动态的，警告：您只能在应用中显式呈现一个导航器

1 个答案: