为什么我们需要一个"root"场景在react native router flux

Question

我正在为我的应用程序实现一个路由库，其中一个看起来非常好react-native-router-flux他们有很好的文档和实现，我只有一个问题。

在所有示例中，场景都包含在根场景中，因此：

<Scene key="root">
  <Scene key="sceneOne" component={SceneOne} />
  <Scene key="sceneOne" component={SceneTwo} />
</Scene>

我试过在没有 root 场景的情况下使用它，它仍然按预期工作：

<Scene key="sceneOne" component={SceneOne} />
<Scene key="sceneOne" component={SceneTwo} />

因此我的问题，因为我目前不明白根的目的。

Answer 1

如果您只是通过将场景添加到 <Router> 元素下来创建场景，那么您不一定需要根元素。例如，以下将起作用：

  render() {
    return <Router>
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
    </Router>
  }

但是，如果您使用 Actions.create() 创建场景，那么您需要一个根元素，因为 相邻的 JSX 元素必须包含在一个封闭的标签中 。例如（取自图书馆的文档）：

import {Actions, Scene, Router} from 'react-native-router-flux';

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="login" component={Login} title="Login"/>
    <Scene key="register" component={Register} title="Register"/>
    <Scene key="home" component={Home}/>
  </Scene>
);

/* ... */

class App extends React.Component {
  render() {
    return <Router scenes={scenes}/>
  }
}

为什么我们需要一个"root"场景在react native router flux

Why do we need a "root" scene in react native router flux

javascript

reactjs

react-native

react-native-router-flux