沒有來自Onsen UI的用戶界面？

我有這個簡單的React JS + Redux應用程序。決定使用Onsen UI創建它的一個版本，我沒有收到任何錯誤，並且有輸出，但是沒有渲染Onsen UI。沒有來自Onsen UI的用戶界面？

這裏是圖：

這裏是我的渲染功能：

render() { 
     return (
      <Ons.Page renderToolbar={this.renderToolbar}> 

           <Ons.List dataSource={this.props.listingData} renderRow={(listingData, index) => (          
            <Ons.ListItem tappable key={index} modifier='longdivider' > 
             <div className={'list' + listingData.location_id}>{listingData.location_id}</div> 
             <div>{listingData.location}</div> 
             <div>{listingData.description}</div> 
            </Ons.ListItem>)} /> 
            <div><div onClick={this.stateToEntry} className="addButton">Add</div><div onClick={this.stateToEdit} className="editButton">Edit</div><div onClick={this.stateToDelete} className="deleteButton">Delete</div></div> 
      </Ons.Page> 
     ); 
    }

這裏是我的renderToolbar功能：

renderToolbar() { 
     return (
      <Ons.Toolbar> 
       <div className='center'>My app</div> 
       <div className='right'> 
        <Ons.ToolbarButton /*onClick={}*/> 
        <Ons.Icon icon='md-more-vert' /> 
        </Ons.ToolbarButton> 
       </div> 
      </Ons.Toolbar> 
     ); 
    }

我檢查模塊都是進口的，我也是bind的功能在我的c onstructor所以它應該工作，但爲什麼我沒有任何用戶界面？

PS：我使用的是溫泉V2.0 &陣營，Onsenui 0.6.2

什麼我錯過了嗎？或者在我的代碼中有錯嗎？

來源

2016-07-22 Joshua Rajandiran

與React native的組件樣式不同，Onsen UI具有普通的CSS文件，爲了使其正常工作，需要包含正常的CSS文件。

您可以通過鏈接標記將它們添加到dom中，或者如果您使用的是webpack，則可以只需要它們。

的文件應該是這樣的

onsenui/dist/css/onsenui.css 
onsenui/dist/css/onsen-css-components.css

你說你沒有得到在控制檯中的任何錯誤，所以缺乏風格似乎是最可能的原因。

此外，如果您有興趣，您可以結帳演示kitchensink應用程序的回購here。

最後，這可能有點偏離主題，但您可以嘗試monaca cli，因爲您可以輕鬆地從工作樣板開始。

來源

2016-07-22 10:33:44

謝謝，這解決了我的問題。我讀過的示例和文檔沒有提及包含CSS。謝謝一堆！ –

不客氣。是的，我想這些指南主要關注反應代碼，而不是風格。無論如何，我很高興我可以幫助。 :) –

沒有來自Onsen UI的用戶界面？

回答

相關問題