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

Question

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

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

Answer 1

根据 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 需要的关键属性(对于 Array 上的迭代)，以便能够区分您的组件。

编辑(2018 年 11 月)

您也可以使用 React.Fragment shorthand :

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