为什么我们在反应原生路由器通量中需要一个“根”场景

Question

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

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

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

我已经尝试在没有根场景的情况下使用它，它仍然可以按预期工作：

<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}/>
  }
}