相鄰的JSX元素必須包裹在封閉的標記中

我想要在我的React-Native應用程序的底部有一個導航欄，並且每個頁面的頂部都有一個工具欄。但是，如果我在index.ios.js文件中創建了這兩個元素，則會出現錯誤：「相鄰的JSX元素必須封裝在封閉標籤中」。如果我把標籤放在Navigator和NavBar的周圍，我只會在我的應用程序中看到一個空白屏幕。我該怎麼辦？這裏是我的渲染功能看起來像index.ios.js相鄰的JSX元素必須包裹在封閉的標記中

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

來源

2017-04-04 Adil Jiwani

當您在一個視圖包裝它確保您設置的彈性爲1。我的猜測是，鑑於你給它沒有大小，因此子元素從父繼承它們的大小（這是0）

來源

2017-04-04 01:56:42

這是正確的 – wvicioso

裹內外一個視圖，並給該外視圖包裝器撓曲1。實施例的樣式：

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

來源

2017-04-04 04:50:14 wvicioso

根據反應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;

不要忘了關鍵屬性爲需求做出反應（如對數組迭代），以能夠區分你的組件。

來源

2017-11-14 16:42:23

相鄰的JSX元素必須包裹在封閉的標記中

回答

相關問題