OnsenUI Navigator + React не удалось перейти - PullRequest
Новая
       31

OnsenUI Navigator + React не удалось перейти

3 голосов
/ 12 апреля 2020

Я бился головой об стену в течение нескольких дней из-за проблемы, упомянутой в названии. Я пытался реализовать функцию навигации с помощью пользовательского интерфейса Onsen и React. Однако после нажатия кнопки навигации пользовательский интерфейс переходит на пустую страницу и сразу же возвращается на первую страницу. Ниже приведен мой код. 

import React from "react";
import { Page, Navigator, Button, SearchInput } from "react-onsenui";

function EditorView() {
  return <Page>This is the editor page!</Page>;
}

function SearchBar() {
  return <SearchInput placeholder="Search" />;
}
const switchToEditorView = navigator => {
  navigator.pushPage({ component: EditorView, props: { key: "editorPage" } });
};

function App() {
  return (
    <Navigator
      renderPage={(route, navigator) => (
        <Page key={route.title}>
          <SearchBar />
          <Page className="custom_page_wrapper">
           <Button onClick={() => switchToEditorView(navigator)}>
            Click to navigate
           </Button>
          </Page>
        </Page>
      )}
      initialRoute={{ component: App, props: { key: "firstPage" } }}
     />
   );
 }
export default App;

А коды и окна здесь для игры: https://codesandbox.io/s/festive-lichterman-okme5?file= / src / App. js: 0-828

Как это побороть?

1 Ответ

3 голосов
/ 21 апреля 2020

Проблема в вашем коде заключается в том, что вы отображаете постоянную страницу в навигаторе, в то время как вы должны визуализировать передаваемый компонент страницы, например 

import React from "react";
import { Page, Navigator, Button, SearchInput } from "react-onsenui";

function EditorView() {
  return <Page>This is the editor page!</Page>;
}

function SearchBar() {
  return <SearchInput placeholder="Search" />;
}
const switchToEditorView = navigator => {
  navigator.pushPage({ component: EditorView, props: { key: "editorPage" } });
};

function Main({ navigator, title, ...rest }) {
  return (
    <Page key={title}>
      <SearchBar />
      Hello
      <Page className="custom_page_wrapper">
        <Button onClick={() => switchToEditorView(navigator)}>
          Click to navigate
        </Button>
      </Page>
    </Page>
  );
}

function App() {
  return (
    <Navigator
      renderPage={(route, navigator) => (
        <route.component navigator={navigator} {...route.props} />
      )}
      initialRoute={{ component: Main, props: { key: "firstPage" } }}
    />
  );
}
export default App;

Рабочая демонстрация

...