Onsen UI의 UI가 없습니까?

Question

이 간단한 React JS + Redux 앱이 있습니다. Onsen UI를 사용하여 버전을 생성하기로 결정 했으므로 오류가없고 출력이 있지만 Onsen UI가 전혀 렌더링되지 않습니다. 내가 모듈을 검사 한

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

: 여기

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 기능입니다 :

여기

내 렌더링 기능입니다 : 여기

는 그림이다 모두 수입, 나 또한 bind 내 C의 기능 onstructor 그래서 작동해야하지만 왜 UI가 없어?

PS : I 반응-Onsenui 내가 놓친 0.6.2

아무것도 온천 2.0 &을 사용하고 있습니다? 아니면 내 코드에 문제가 있습니까?

Answer 1

React native의 스타일링 방법과 달리 Onsen UI에는 정상적인 CSS 파일이 포함되어 있습니다. 정상적인 CSS 파일은 제대로 작동하기 위해 포함되어야합니다.

링크 태그를 통해 DOM에 추가 할 수 있습니다. 웹팩을 사용하고 있다면 필요로 할 수 있습니다.

파일은 당신이 콘솔에서 오류를받지 못하고있어, 그래서 스타일의 부족이 가장 큰 원인처럼 보인다 말했다 뭔가

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

같이해야한다.

또한 관심이 있으시면 데모 용 주방 카운터 앱 here의 레포를 결제 할 수 있습니다.

그리고 마침내 이것은 약간의 주제가 될 수도 있지만, monaca cli을 사용하면 간단히 작동하는 상용구에서 시작할 수 있습니다.