react - native 영화 프로필 app, 알 아 볼 까요?(android 엔 드)

1755 단어 es6demoreact.jsreact-native자바 script
겨울방학 이 끝 났 습 니 다. 겨울방학 동안 react - native 를 했 습 니 다. 콩잎 을 모방 하여 현재 인기 영화 와 곧 개봉 할 영 화 를 보 는 간단 한 app 을 실 현 했 습 니 다. 프로젝트 가 비교적 간단 해서 막 입문 한 친구 들 이 보기 에 매우 적합 합 니 다.먼저 우 리 는 react - native: react - native 중국어 망, react - native 홈 페이지 를 알 아야 한다. 영 어 를 잘 하 는 학생 들 은 당연히 후자 react - native 홈 페이지 에 가서 보 는 것 을 추천 해 야 한다. 홈 페이지 이기 때문에 내용 이 지연 되 지 않 는 다.
프로젝트 구성:
android                 //        
api                     //    api
  |---api.js            //            
components              //   
  |---col-movies.js     //          
  |---flat-movies.js    //           
  |---scroll-movies.js  //         
page
  |---all-movies.js     //       
  |---bref-introduction.js  //       
  |---cinemas.js        //        
  |---home.js           //   
  |---loading.js        //       
App.js                  //     
index.js                //

효과.
첫 페이지:
전체 20 편의 영화 보기:
영화 프로필 보기 및 티켓 팅:
기술 창고
  • react-native
  • es6 (react - native 자체 지원 es6) Babel · learn es 2015
  • flexbox 레이아웃 (react - native 는 기본적으로 flexbox 레이아웃 을 사용 합 니 다)
  • 내 비게 이 션 react - navigation 홈 페이지
    • 인터페이스
  • 콩잎 이 제공 하 는 공개 인터페이스 (개봉 예정 및 개봉 중) 콩잎 공개 인터페이스
  • 자신의 nodejs 가 작성 한 인터페이스 (근처 영화관) 는 이 페이지 (티켓 구 매 페이지) 를 무시 할 수 있 습 니 다 
    • const tempUrl = 'http://ip:3000/cinema' //              ，ip     ip，       ，  react-native  。

    데 이 터 를 되 돌려 줍 니 다: status: 0 / 1msg: 'list: object, 인 터 페 이 스 는 다음 표 와 같 습 니 다.
    name
    price
    site
    "제일 싼 영화관".
    25
    나 가서 우회전 2 층 B 동 101, 102 번 카드.
    이 항목 코드 주소:
    프로젝트 원본 코드
    npm install     

react-native run-android         
react-native run-android --simulator
    Vue.js 인스턴스 옵션 속성
    useHistory / useLotation

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage