Question

我希望在我的React-Native应用中，底部有一个导航栏，每个页面顶部都有一个工具栏。但是，如果我在index.ios.js文件中创建这两个元素，我会收到错误：“相邻的JSX元素必须包装在一个封闭的标记中”。如果我在Navigator和NavBar周围放置标签，我只会在我的应用中看到一个空白屏幕。我该怎么办？这是我的render函数在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）< / p>

Answer 2

根据 React 16 ，如果你不想避免<View>包裹，您可以将多个组件从render返回为数组。

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

Answer 3

将两者都包装在View中，并为外部View包装器提供flex1样式。示例：

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

必须将相邻的JSX元素包装在封闭的标记

3 个答案: