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 propに注目してください。ルートは単純にjavascriptオブジェクトであり、どんな形をとってもかまいませんし、必要な値を持っています。これは、ナビゲーションスタック内のコンポーネント間で値とメソッドを渡す主な方法です。

Navigatorは、 renderScene propから返された値に基づいて何をレンダリングするかを認識しています。

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

ナビゲータの設定

Navigatorのトランジションは、 configureScene propをconfigureSceneしてconfigureScene 。これは、 routeオブジェクトを渡した関数であり、設定オブジェクトを返す必要があります。利用可能な設定オブジェクトは次のとおりです。

• Navigator.SceneConfigs.PushFromRight（デフォルト）
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.Horizo​​ntalSwipeJump
• Navigator.SceneConfigs.Horizo​​ntalSwipeJumpFromRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

これらのオブジェクトの1つを変更せずに返すことも、設定オブジェクトを変更してナビゲーション遷移をカスタマイズすることもできます。たとえば、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 propが付属しています。理論的には適切に設定されたReactコンポーネントを使用できます。しかし、最も一般的な実装では、デフォルトのNavigator.NavigationBar使用します。これは、ルートに基づいてナビゲーションバーの外観を設定するために使用できるrouteMapper propを使用します。

routeMapperは、 Title 、 RightButton 、およびLeftButton 3つの関数を持つ通常のjavascriptオブジェクト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公式React Nativeドキュメンテーションと Using Navigatorの React Nativeガイドを参照してください。

反応するネイティブアプリでのナビゲーションに反応ナビゲーションを使用する

反応ナビゲーションの助けを借りて、あなたは本当に簡単にあなたのアプリへのナビゲーションを追加することができます。

反応ナビゲーションをインストールする

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これはAppの最初の画面ですか？

例：

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（インデックスファイル）にインポートしてレンダリングします。詳細については、このリンクをご覧ください 。