没有来自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的用户界面？

回答

相关问题