React Native 에서 Navigator 의 사용 방법 예시
React Native 에서 페이지 의 도약 을 어떻게 실현 하 는 지 잘 알 고 있 습 니 다.이것 은 돌파 점 이자 어 려 운 점 입 니 다.우리 의 페이지 를 전환 시 키 려 면 모든 초보 자 들 이 추구 하 는 것 이 어야 합 니 다.그러면 RN 에서 이러한 기능 을 실현 하려 면 Navigator 의 사용법 을 알 아야 합 니 다.Navigator 는 React Native 자체 의 구성 요소 이 므 로 제3자 구성 요 소 를 가 져 올 필요 가 없습니다.다음은 어떻게 사용 하 는 지 구체 적 으로 설명 하 겠 습 니 다.
방법 은 아래 와 같다.
우선,우 리 는 index.ios.js 와 index.android.js 파일 을 매우 많은 코드 로 쓰 지 않 는 것 이 좋 습 니 다.단지 하나의 프로젝트 의 입구 로 만 생각 할 수 있 습 니 다.좋 습 니 다.쓸데없는 말 은 하지 않 고 코드 를 시작 하 는 것 이 좋 습 니 다.
1.프로젝트 디 렉 터 리 에 js 폴 더 를 만 들 고 index.js 파일 을 만 드 는 데 익숙 합 니 다.(파일 이름 은 마음대로 가 져 갈 수 있 습 니 다)
2.코드 작성
코드 구현
render Scene 과 configureScene 방법 은
configureScene(route){
if(route.sceneConfig){ return route.sceneConfig; }
return Navigator.SceneConfigs.FloatFromRight;// ,
}
import LoginPage from './pages/login';
const initialRoute = {
name: 'login',
page: LoginPage,
};3.후속 페이지 의 이동
상기 코드 는 처음에 login 페이지 로 넘 어 갔다 고 말 했 습 니 다.그러면 login 페이지 가 다른 페이지 로 넘 어가 면 이렇게 많은 코드 를 써 야 하지 않 겠 습 니까?물론 네가 이렇게 많이 쓰 기 를 원 하 는 것 도 가능 하 다.여기 서 더욱 간결 한 방식 을 설명 하 자.
우선,login 페이지 import 에서 대상 페이지 로 넘 어가 야 합 니 다.
대상 페이지 가 져 오기
그리고 이 방법 을 적어 서 props 를 받 으 세 요.
constructor(props, context) {
super(props);
}
대상 페이지 점프 방법
마지막 으로 방법 을 호출 하여 점프 를 실현 한다.
방법 호출
Button,Touchable Highlight 등 구성 요소 에서 도 호출 할 수 있 습 니 다.
후속 페이지 는 이런 식 으로 유추 하면 페이지 전환 기능 을 실현 할 수 있 으 니 당신들 에 게 도움 이 되 기 를 바 랍 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
