相邻的 JSX 元素必须包含在封闭标签中

我希望在 React-Native 应用程序的每个页面底部都有一个导航栏，在顶部有一个工具栏。但是，如果我在 index.ios.js 文件中创建这两个元素，则会收到错误：“相邻 JSX 元素必须包含在封闭标记中”。如果我在导航器和导航栏周围放置标签，我只会在应用程序中看到一个空白屏幕。我应该怎么办？这是我的渲染函数在 index.ios.js 中的样子

render() {
    return (
      <Navigator
        initialRoute={{name: 'Login'}}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
          style={ styles.nav }
          routeMapper={ NavigationBarRouteMapper } />
        }
        />
        <NavBar />
    );
  }

As per React 16，如果你不想避免<View>包裹, 您可以从渲染中将多个组件作为数组返回。

return ([
    <Navigator key="navigator" />,
    <NavBar key="navbar" />
]);

或者在无状态 ES6 组件中：

import React from 'react';

const Component = () => [
  <Navigator key="navigator" />,
  <NavBar key="navbar" />
];

export default Component;

不要忘记关键属性，因为 React 需要（如数组上的迭代）能够区分您的组件。

编辑（2018 年 11 月）

您还可以使用React.Fragment速记 https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}