Нет интерфейса от пользовательского интерфейса Onsen?

Question

У меня есть это простое приложение React JS + Redux. Решил создать его версию с использованием пользовательского интерфейса Onsen, я не получаю никаких ошибок и есть выход, но пользовательский интерфейс Onsen вообще не отображается.

Вот ПОС:

Вот моя функция визуализации:

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 функции в моем конструктор, поэтому он должен работать, но почему у меня нет интерфейса?

PS: Я использую Onsen v2.0 & React-Onsenui 0.6.2

Все, что я пропустил? Или что-то не так в моем коде?

Answer 1

В отличие от стиля React native для стилизации своих компонентов, пользовательский интерфейс Onsen имеет обычные файлы CSS, которые необходимо включить, чтобы он работал правильно.

Вы можете добавить их с помощью тегов ссылок в дом или, если вы используете веб-пакет, вы можете просто потребовать их.

Файлы должны быть чем-то вроде

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

Вы сказали, что вы не получаете никаких ошибок в консоли, поэтому отсутствие стилей кажется наиболее вероятной причиной.

Также, если вас это интересует, вы можете проверить репо приложения для демонстрации кухни here.

И, наконец, это может быть немного не по теме, но вы можете попробовать monaca cli, так как с ним вы можете легко начать с рабочего шаблона.