React-Native에서 Navigator 구성 요소를 사용한 사용자 정의 탐색

component 의 도움으로 뷰 간 사용자 정의 탐색 기능이있는 데모 앱을 개발하면서 React Native의 가능성을 탐색 중 입니다.Navigator

기본 앱 클래스는 네비게이터를 렌더링하고 내부 renderScene는 전달 된 구성 요소를 리턴합니다.

class App extends React.Component {
    render() {
        return (
            <Navigator
                initialRoute={{name: 'WelcomeView', component: WelcomeView}}
                configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
                renderScene={(route, navigator) => {
                    // count the number of func calls
                    console.log(route, navigator); 

                    if (route.component) {
                        return React.createElement(route.component, { navigator });
                    }
                }}
             />
        );
    }
}

현재 앱에는 두 가지보기가 있습니다.

class FeedView extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>
                    Feed View!
                </Text>
            </View>
        );
    }
}

class WelcomeView extends React.Component {
    onPressFeed() {
        this.props.navigator.push({
            name: 'FeedView',
            component: FeedView
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome View!
                </Text>

                <Text onPress={this.onPressFeed.bind(this)}>
                    Go to feed!
                </Text>
            </View>
        );
    }
}

내가 알아 내고 싶은 것은 :

• 로그에서“go to feed”를 누르면 renderScene뷰가 올바르게 한 번 렌더링되지만 여러 번 호출되는 것을 볼 수 있습니다. 애니메이션이 어떻게 작동합니까?

  index.ios.js:57 Object {name: 'WelcomeView', component: function}
  index.ios.js:57 Object {name: 'FeedView', component: function}
  // renders Feed View

• 일반적으로 내 접근 방식은 React 방식을 따르거나 더 잘 수행 할 수 있습니까?

내가 달성하고자하는 NavigatorIOS것은 탐색 막대 가없는 것과 비슷 하지만 (일부보기에는 자체 사용자 정의 탐색 막대가 있습니다).

당신의 접근 방식은 훌륭하게 작동합니다. Fb의 큰 앱에서는 require()렌더링 할 때까지 장면 구성 요소를 호출하지 않으므로 약간의 시작 시간을 절약 할 수 있습니다.

renderScene장면이 처음 네비게이터에 푸시 될 때 함수가 호출되어야한다. 네비게이터가 다시 렌더링 될 때 활성 장면에 대해서도 호출됩니다. 당신이 볼 경우 renderScene후 여러 번 호출되는 push, 그것은 아마 버그입니다.

네비게이터는 여전히 진행중인 작업이지만 문제가 발견되면 github에 파일을 작성하고 저를 태그하십시오! (@ericvicenti)

Navigator은 더 이상 사용되지 않습니다. 대신 RN 0.44.0사용중인 react-native-deprecated-custom-components기존 응용 프로그램을 지원하는 데 사용할 수 있습니다 Navigator.

다른 사람들이 이전에 언급했듯이 Navigator는 v0.44부터 더 이상 사용되지 않지만 이전 응용 프로그램을 지원하기 위해 가져올 수 있습니다.

버전 0.44의 핵심 React Native 패키지에서 Navigator가 제거되었습니다. 이 모듈은 하위 호환성을 유지하기 위해 응용 프로그램에서 가져올 수 있는 반응 네이티브 사용자 정의 구성 요소 패키지 로 이동되었습니다 .

Navigator의 원본 문서를 보려면 이전 버전의 문서로 전환하십시오.

문서에 따라 (React Native v0.54) 화면 간 탐색 . 이제 막 시작한 경우 React Navigation 을 사용 하거나 Android 이외의 응용 프로그램의 경우 NavigatorIOS 를 사용하는 것이 좋습니다.

탐색을 시작한 경우 React Navigation 을 사용하고 싶을 것입니다 . React Navigation은 iOS 및 Android에서 공통 스택 탐색 및 탭 탐색 패턴을 표시 할 수있는 기능으로 사용하기 쉬운 탐색 솔루션을 제공합니다.

...

iOS 만 대상 으로하는 경우 기본 UINavigationController 클래스 주위에 래퍼를 제공하므로 최소한의 구성으로 기본 모양과 느낌을 제공하는 방법으로 NavigatorIOS 를 확인하는 것이 좋습니다.

NB :이 답변을 제공 할 당시 React Native의 버전은 0.54입니다.

네비게이터 구성 요소가 더 이상 사용되지 않습니다. askonov의 Reactive-Native-router-flux를 사용할 수 있으며 다양한 종류가 있으며 다양한 애니메이션을 지원하며 효율적입니다.