react-native
네비게이터 모범 사례

항해자

Navigator 는 React Native의 기본 네비게이터입니다. Navigator 구성 요소는 경로 개체의 스택을 관리하고, 그 스택을 관리하는 방법을 제공합니다.

<Navigator
  ref={(navigator) => { this.navigator = navigator }}
  initialRoute={{ id: 'route1', title: 'Route 1' }}
  renderScene={this.renderScene.bind(this)}
  configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}
  style={{ flex: 1 }}
  navigationBar={
    // see "Managing the Navigation Bar" below
    <Navigator.NavigationBar routeMapper={this.routeMapper} /> 
  }
/>

루트 스택 관리

우선, initialRoute 소품에 주목하십시오. 경로는 단순히 자바 스크립트 객체이며 원하는 모양을 취할 수 있으며 원하는 값을 가질 수 있습니다. 네비게이션 스택의 구성 요소간에 값과 메서드를 전달하는 주요 방법입니다.

Navigator 는 renderScene 소품에서 반환 된 값을 기반으로 렌더링 할 대상을 알고 있습니다.

renderScene(route, navigator) {
  if (route.id === 'route1') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  } else if (route.id === 'route2') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  }
}

이 예제에서 ExampleScene 의 구현을 상상해 봅시다.

function ExampleScene(props) {

  function forward() {
    // this route object will passed along to our `renderScene` function we defined above.
    props.navigator.push({ id: 'route2', title: 'Route 2' });
  }

  function back() {
    // `pop` simply pops one route object off the `Navigator`'s stack
    props.navigator.pop();
  }

  return (
    <View>
      <Text>{props.title}</Text>
      <TouchableOpacity onPress={forward}>
        <Text>Go forward!</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={back}>
        <Text>Go Back!</Text>
      </TouchableOpacity>
    </View>
  );
}

네비게이터 구성하기

configureScene prop를 사용하여 Navigator 의 전환을 구성 할 수 있습니다. 이것은 route 객체를 통과 한 함수이며 구성 객체를 반환해야합니다. 사용 가능한 구성 개체는 다음과 같습니다.

• Navigator.SceneConfigs.PushFromRight (기본값)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.HorizontalSwipeJump
• Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

이러한 객체 중 하나를 수정하지 않고 반환하거나 구성 객체를 수정하여 탐색 전환을 사용자 정의 할 수 있습니다. 예를 들어, iOS UINavigationController 의 interactivePopGestureRecognizer 를보다 가깝게 에뮬레이트하기 위해 가장자리 히트 너비를 수정하려면 다음을 수행하십시오.

configureScene={(route) => {
  return {
    ...Navigator.SceneConfigs.FloatFromRight,
    gestures: {
      pop: {
        ...Navigator.SceneConfigs.FloatFromRight.gestures.pop,
        edgeHitWidth: Dimensions.get('window').width / 2,
      },
    },
  };
}}

NavigationBar 관리

Navigator 구성 요소에는 navigationBar 소품이 있으며 이론적으로 올바르게 구성된 React 구성 요소를 사용할 수 있습니다. 그러나 가장 일반적인 구현은 기본 Navigator.NavigationBar 사용합니다. 이 경로를 기반으로 탐색 모음의 모양을 구성하는 데 사용할 수있는 routeMapper 소품을 사용합니다.

routeMapper 는 Title , RightButton 및 LeftButton 세 가지 기능을 가진 일반 자바 스크립트 객체입니다. 예 :

const routeMapper = {

  LeftButton(route, navigator, index, navState) {
    if (index === 0) {
      return null;
    }

    return (
      <TouchableOpacity
        onPress={() => navigator.pop()}
        style={styles.navBarLeftButton}
      >
        <Text>Back</Text>
      </TouchableOpacity>
    );
  },

  RightButton(route, navigator, index, navState) {
    return (
      <TouchableOpacity
        onPress={route.handleRightButtonClick}
        style={styles.navBarRightButton}
      >
        <Text>Next</Text>
      </TouchableOpacity>
   );
  },

  Title(route, navigator, index, navState) {
    return (
      <Text>
        {route.title}
      </Text>
    );
  },
};

더보기

각 소품의 자세한 설명서는 참조 공식적인가 기본 문서 반응 Navigator , 그리고에 기본 가이드 반응 항법을 사용 .

반응하는 네이티브 앱에서 네비게이션을 위해 반응 네비게이션 사용

반작용 탐색 을 사용하면 내비게이션을 앱에 쉽게 추가 할 수 있습니다.

반응 항법 장치 설치

npm install --save react-navigation

예:

import { Button, View, Text, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

const App = StackNavigator({
  FirstPage: {screen: FirstPage},
  SecondPage: {screen: SecondPage},
});

class FirstPage extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;

    return (
      <Button
        title='Go to Second Page'
        onPress={() =>
          navigate('SecondPage', { name: 'Awesomepankaj' })
        }
      />
    );
  }
}

class SecondPage extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.name,
  });

  render() {
    const { goBack } = this.props.navigation;
    return (
      <View>
        <Text>Welcome to Second Page</Text>
        <Button
          title="Go back to First Page"
          onPress={() => goBack()}
        />
      </View>
    );
  }
}

반응 네이티브 - 라우터 - 플럭스를 사용한 네이티브 네비게이션

npm install --save react-native-router-flux 를 사용하여 npm install --save react-native-router-flux

반응 네이티브 라우터 플럭스에서 각 경로는 <Scene>

<Scene key="home" component={LogIn} title="Home" initial />

key 특정 장면을 나타내는 데 사용할 수있는 고유 한 문자열입니다.

component 요소 표시 할 구성 요소, 여기에

title 은 NavBar를 만들고 제목에 'Home'을 지정합니다.

initial 이 앱의 첫 화면인가요?

예:

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LogIn from './components/LogIn';
import SecondPage from './components/SecondPage';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="login" component={LogIn} title="Login Form" initial />
      <Scene key="secondPage" component={SecondPage} title="Home" />
    </Router>
  );
};

export default RouterComponent;

이 파일을 기본 App.js (색인 파일)에서 가져 와서 렌더링하십시오. 자세한 내용은이 링크를 방문하십시오.