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

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>
        );
    }
}

내가 알고 싶은 것은:

• 에서 "to Feed를 누르면 "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
  

• 일반적으로 리액트 방식을 따르고 있습니까?아니면 더 잘 할 수 있을까요?

원하는 것은 탐색 모음과 비슷하지만 탐색 모음은 없는 것입니다(단, 일부 보기에는 사용자 지정 탐색 모음도 있습니다).

을 사용하다큰 에서는 Fb를 Fb로 .require()렌더링할 때까지 씬 컴포넌트에 사용할 수 있으므로 시작 시간을 다소 절약할 수 있습니다.

renderScene장면이 Navigator(탐색기)에 처음 푸시되면 함수를 호출해야 합니다.항해사「」가 renderScene push그럼 아마 버그일 거예요.

Navigator는 아직 작업 중이지만 문제가 발견되면 github에 파일링하여 태그해주세요!(@ericvicenti)

Navigator되었습니다.RN 0.44.0 하면 .react-native-deprecated-custom-components하는 어플리케이션을 지원합니다.Navigator.

앞에서 설명한 바와 같이 Navigator는 v0.44 이후 권장되지 않지만 이전 애플리케이션을 지원하기 위해 Import할 수 있습니다.

Navigator가 버전 0.44의 핵심 React Native 패키지에서 제거되었습니다.모듈은 하위 호환성을 유지하기 위해 응용 프로그램에서 Import할 수 있는 react-native-custom-components 패키지로 이동되었습니다.

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

문서(React Native v0.54)에 따라 화면 사이를 이동합니다.이제 막 시작하려는 경우 반응 탐색을 사용하거나 탐색기를 사용하는 것이 좋습니다.비 Android 애플리케이션용 IOS

네비게이션을 이제 막 시작한 경우 리액트 네비게이션을 사용하는 것이 좋습니다.React Navigation은 iOS와 Android 모두에서 공통 스택 내비게이션과 탭 형식의 내비게이션 패턴을 표시할 수 있는 사용하기 쉬운 내비게이션 솔루션을 제공합니다.

...

iOS만을 대상으로 하는 경우 Navigator를 체크하는 것도 좋습니다.네이티브 UINavigation Controller 클래스 주위에 래퍼를 제공하기 때문에 최소한의 설정으로 네이티브룩앤필을 제공하는 방법으로서 IOS를 사용합니다.

NB: 이 답변을 제공했을 때 React Native 버전은 0.54였습니다.

Navigator 구성 요소는 현재 사용되지 않습니다.react-native-router-flux by askonov를 사용할 수 있습니다.다양한 종류가 있고 다양한 애니메이션을 지원하며 효율적입니다.

언급URL : https://stackoverflow.com/questions/29335523/custom-navigation-with-navigator-component-in-react-native