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

Question

我想在我的 React-Native 应用程序的每个页面的底部都有一个导航栏，在每个页面的顶部都有一个工具栏。但是，如果我在 index.ios.js 文件中创建这两个元素，我会得到错误："Adjacent JSX elements must be wrapped in an enclosing tag"。如果我在 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

当你将它包装在视图中时，确保将 flex 设置为 1。我的猜测是你给它的视图没有大小，因此子元素从父元素继承它们的大小（为 0 )

Answer 2

将两者都包装在视图中，并为外部视图包装器指定 flex 1 样式。示例：

    <View style={{flex: 1}}>
        <Navigator 
           {. . .} 
        />
        <NavBar />
    </View>

Answer 3

根据 React 16，如果你不想避免 <View> 包装，您可以 return 将多个组件渲染为一个数组。

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

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

Adjacent JSX elements must be wrapped in an enclosing tag

react-native

react-native-ios