React Native 구덩이 메 우기 여행-Navigator 대신 react-navigation 사용

Navigator 은 React Native 에 의 해 폐기 되 었 습 니 다.다른 의존 창고 react-native-deprecated-custom-components 에서 찾 을 수 있 을 지도 모른다.하지만 공식 적 으로 react-navigation 을 추천 한 이상 이 물건 이 어떤 좋 은 것 이 있 는 지,가치 가 있 는 지 살 펴 보 자.
한 마디 로 react-navigation 은 매우 유용 하 다.이전에 Navigator 을 설정 하 는 것 은 매우 번 거 로 웠 지만 react-navigation 의 모든 네 비게 이 션 구성 요 소 를 사용 하 는 것 은 매우 간단 했다.프로젝트 의 github 주 소 는 여기 있 습 니 다.react-navigation 은 다음 세 개의 Navigator 를 포함한다.

StackNavigator:이 구성 요 소 는 이전의 Navigator 을 대체 하 는 데 사 용 됩 니 다.'선진 셰 프'의 창고 내 비게 이 션 을 유지 하면 이 걸 로 할 수 있다.

TabNavigator:이 구성 요소 와 iOS 의'TabBarController.그런 것 같 습 니 다.

DrawerNavigator:이 구성 요 소 는 바로 서랍 식 네 비게 이 션 메뉴 입 니 다.React Native 에는 Android 만 있 습 니 다.DrawerLayoutAndroid,iOS 에는 없습니다.DrawerNavigator 이 있어 서 두 플랫폼 모두 사용 할 수 있 습 니 다.

다음 글 에서 StackNavigator 과 DrawerNavigator 을 소개 하 겠 습 니 다.TabNavigatgor 의 사용 은 매우 간단 하 다.앞의 두 가지 로 돌아 가면 자 연 스 럽 게 해결 할 수 있다.
Stack Navigator
...에 있다

react-native init AwesomeProject

명령 후 생 성 된 기본 항목 에서 index.js 파일 보기:

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('AwesomeProject', () => App);

앱 이 실행 되 기 시작 하면 App 구성 요소 가 실 행 됩 니 다.즉,App.js 파일 export 가 어떤 구성 요소 인지,App 은 어떤 구성 요 소 를 실행 합 니 다.
App.js 파일 에서 export default 을 제거 합 니 다.우리 demo 가 한 것 처럼 Message Container.js 파일 을 추가 하고 demo 의 내용 을 추가 합 니 다.이렇게 그 중에서 우 리 는 이미 App,MessageContainer 두 개의 구성 요 소 를 가지 고 있다.
다음은 어떻게 배치 하 는 지 보 겠 습 니 다.
가장 간단 한 것:

export default NavHome = StackNavigator({
  Home: {
    screen: NavApp,
  },
  Message: {
    screen: MessageContainer,
  },
})

StackNavigator 방법 으로 생 성 된 구성 요소 NavHome 을 내 보 냅 니 다.운행 을 시작 하면 이론 적 으로 내 비게 이 션 을 할 수 있다.하지만 문제 가 있 을 수 있다.아직 뛸 수 있 는 촉발 점 이 없 기 때문이다.그래서 우 리 는 다음 과 같은 수정 을 해 야 한다.
App.js 파일 의 내용 을 수정 합 니 다.단 추 를 추가 하고 클릭 하면 MessageContainer 구성 요소 에 들 어 갈 수 있 습 니 다.Message Container.js 파일 을 수정 하고 단 추 를 추가 하여 되 돌려 줍 니 다.

//App.js


//MessageContainer.js

但是，这样还是demo的水平，离真正的产品级使用还差很多。一般的App，在push到下一个页面的时候会点击navigation bar的回退按钮返回上一页。我们就来实现这个功能。

使我们首先看一下StackNavigator的API：

StackNavigator(RouteConfigs, StackNavigatorConfig)

문 서 를 보면 이 기능 을 실현 하려 면 RouteConfigs 에서 navigationOptions 을 증가 시 켜 야 한다.다음 과 같다.

export default NavHome = StackNavigator({
  Home: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      title: 'Home',
      headerLeft: ( navigation.navigate('DrawerToggle')} title={'User'} />),
      headerRight: ( navigation.navigate('Message')} title={'Message'} />),
    })
  },
  Message: {
    screen: MessageContainer,
    navigationOptions: ({navigation}) => ({
      title: "Message",
      headerLeft: ( {navigation.goBack();}} />)
    })
  },
});

자세히 보 세 요.

title:네 비게 이 션 표시 줄 에 표 시 된 title 입 니 다.

header Left:네 비게 이 션 표시 줄 왼쪽 에 있 는 구성 요소 입 니 다.나 는 여기에 버튼 을 하나 놓 았 다.더 좋 은 것 은 navigationOptions 구성 요 소 를 설치 하 는 것 이다.버튼 은 iOS 에 서 는 괜 찮 지만 안 드 로 이 드 에 서 는 반짝반짝 빛 나 는 버튼 이 야,각종 테두리 와 그림자.

header Right:네 비게 이 션 표시 줄 오른쪽 에 있 는 구성 요소 입 니 다.

TouchableOpacity 의 네 비게 이 션 표시 줄 에'되 돌아 가기'버튼 만 있 으 면 되 기 때문에 MessageContainer 하나만 있 으 면 충분 합 니 다.홈 페이지 에 있 는 네 비게 이 션 표시 줄 의 headerLeft 은 잠시 후에 말 한 headerLeft 을 촉발 하 는 데 사용 된다.
이렇게 해서 이 믿 을 만 한 내 비게 이 션 이 완성 되 었 다.
Drawer Navigator DrawerNavigator 과 DrawerNavigator 의 배치 가 유사 합 니 다.

const NavApp = DrawerNavigator({
  Home: {
    screen: App,
  },
  MyWallet: {
    screen: MyWalletView,
  },
  MyVoucher: {
    screen: MyVoucherView,
  }
});

이 럴 때 는 이렇게 보인다.
하지만 내 가 원 하 는 효 과 는 이렇다.
분명히 문서 에서 제공 하 는 간단 한 맞 춤 형 제작 은 이런 효 과 를 완성 할 수 없다.그래서 우 리 는 문 서 를 살 펴 보 았 는데 기본 Drawer 를 직접 교체 하 는 방법 이 있 습 니 다.매우 간단 합 니 다.

const NavApp = DrawerNavigator({
  Home: {
    screen: App,
  },
  User: {
    screen: UserContainer,
  },
  MyWallet: {
    screen: MyWalletView,
  },
  MyVoucher: {
    screen: MyVoucherView,
  }
}, {
   contentComponent: props => ()
})

API 보기:

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

StackNavigator 설정 에 있 는 DrawerNavigatorConfig 설정 만 불 러 오 면위 에 설 정 된 두 번 째 매개 변수 입 니 다.

{
   contentComponent: props => ()
}

contentComponent 은 drawer 의 콘 텐 츠 구성 요소 입 니 다.여기 서 우 리 는 contentComponent 구성 요 소 를 사용 하여 props 를 전달 했다.
이렇게 해서 우리 가 원 하 는 서랍 식 메뉴 가 실현 되 었 다.
StackNavigator 와 DrawerNavigator 를 결합 하여 사용 합 니 다.
지금 이 두 구성 요 소 를 결합 해서 사용 합 니 다.첫 페이지 의 네 비게 이 션 표시 줄 에 있 는 두 개의 단 추 는 왼쪽 에 drawer 네 비게 이 션 을 열 고 오른쪽 에 있 는 것 은"message"단 추 를 누 르 고 StackNavigator 구성 요소 네 비게 이 션 을 사용 합 니 다.
drawer 내 비게 이 션 에서 UserDrawer 을 사용한다 면 이렇게 설정 하면:

export default NavHome = StackNavigator({
  Home: {
    screen: NavApp,
    navigationOptions: ({navigation}) => ({
      title: 'Home',
      headerLeft: ( navigation.navigate('DrawerToggle')} title={'User'} />),
      headerRight: ( navigation.navigate('Message')} title={'Message'} />),
    })
  },
  Message: {
    screen: MessageContainer,
    navigationOptions: ({navigation}) => ({
      title: "Message",
      headerLeft: ( {navigation.goBack();}} />)
    })
  },
});

export default NavApp = DrawerNavigator({
  Home: {
    screen: NavHome, // ***
  },
  MyWallet: {
    screen: MyWalletView,
  },
  MyVoucher: {
    screen: MyVoucherView,
  }
}, {
   contentComponent: props => ()
})

Drawer 내 비게 이 션 에서 stack 내 비게 이 션 을 사용 하려 면 drawer 내 비게 이 션 의 한 경로 옵션 에 StackNavigator 을 추가 하 십시오.이 screen: NavHome 이 바로 stack 내 비게 이 션 입 니 다.반대로 stack 내 비게 이 션 의 한 route 옵션 의 screen 에 drawer 내 비게 이 션 을 지정 합 니 다.
하지만 사용 에 있어 서 는 약간의 차이 가 있다.drawer 내 비게 이 션 에 stack 내 비게 이 션 이 포함 되 어 있다 면.그럼 drawer 네 비게 이 션 메뉴 의 가장 높 은 점 은 화면의 가장 높 은 점 입 니 다.반대로 drawer 네 비게 이 션 이 stack 네 비게 이 션 에 포함 되면 drawer 네 비게 이 션 메뉴 의 가장 높 은 점 은 네 비게 이 션 표시 줄 아래 에 있 습 니 다.그림:
본론 으로 돌아가다.drawer 네 비게 이 션 메뉴 에서 모든 페이지 로 이동 한 후 어떻게 돌아 갑 니까?아니면 옛날 방법?

export default class MyWalletView extends React.Component {
  render() {
    return (
       this.props.navigation.goBack()}>
        {'My Wallet'}
      
    );
  }
}

props 가 들 어 오 는 navigation 방법 으로 되 돌아 갑 니 다:

this.props.navigation.goBack()

총결산
더 많은 것 은 코드 를 보 세 요.남아 서 NavHome 독자 여러분 께 연습 연습 을 실천 해 보 세 요.사실 설정 의 단순 도 는 이전 리 액 트 네 이 티 브 의 네 이 비 게이터 보다 훨씬 낮 아 졌 다.TabNavigator 리 에는 StackNavigator 과 navigate() 두 가지 방법 을 제외 하고 다른 방법 도 사용 할 수 있다.실제 앱 상호작용 에서 도 한 페이지 로 탐색 한 다음 에 그 페이지 에서 뛰 어 오 는 것 만 간단 한 것 은 아니다.나중에 기회 가 되면 이 방면 의 내용 을 이야기 할 것 이다.