스크롤 뷰 안에 flatList를 넣으려고 할 때 위와 같은 메세지가 출력된다.

Warning error

 

<FlatList nestedScrollEnabled />

 

React Native 0.41 이상일 경우

<ScrollView
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollToEnd({animated: true});
    }}>
</ScrollView>

 

flatList에서

 

<FlatList

      ref={'flatList'}

      data={this.state.message}

      renderItem={({ item }) => this._onRefresh(item)}

      keyExtractor={(itemindexnumber=> { return index.toString() }}

     onContentSizeChange={(contentWidthcontentHeight)=>{

           (this.refs.flatList as FlatList).scrollToEnd({animated: true});

           }}

/>

 

 

 

 

 

npm install react-router-dom

 

link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운되고

전체 페이지를 다시 렌더링하는 방식을 사용한다.

즉, 새로고침이 되어 변경이 필요없는 부분까지 갱신되므로 비효율적이다.

 

SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드한다.

이후 새로운 페이지가 요청 시 갱신에 필요한 데이터만 전달 받아 페이지를 갱신하므로

전체적인 트래픽을 감소할 수 있다. 

또한 전체 렌더링이 아니라 변경이 필요한 부분만 갱신한다.

 

리액트는 SPA(Single Page Application)를 만드는 데 최적화되어 있다.

별도로 다른 페이지를 이동하는 Routing 기능은 제공하지 않는다.

 

React는 React-Router라는 라이브러리를 사용하면 Rounting을 할 수 있다.

 

 

 

 

 

React

 

반응형 웹페이지를 만들어 보고 싶었다. 

리액트로 캐치마인드 멀티플레이 게임 사이트를 만드는 것을 단기 목표로 잡았다.

 

최종적으로는 리액트를 활용하여 일본어 단어 암기를 위한 사이트와 Swift로 앱을 만들어 연결해 보려고 한다. 

데이터베이스로는 PostgreDB를 사용해볼 생각이다. 

 

_끗

 

+ Recent posts