翻訳|React-navigationナビゲーションシステム(1)

7763 ワード

title:翻訳|React-navigation(1)date:2017-03-27 20:26:48 categories:翻訳
このReact-nativeのナビゲーションシステムは基本的に公式に標準化されている可能性があります.2ヶ月で3000以上のstarが蓄積されました教程はこの文章を参考にすることができて、この文章の作者のお兄さんは私と同じように振り回されるのが好きです.前から彼のもう一つのナビゲーションチュートリアルを参考にして、今度また来ます.
本文は翻訳の公式ドキュメントです.基本構想はいくつかの登録システムがあるが、appでナビゲーションを使用するには、対応するシステムにコンポーネントを登録しなければならない.
こんにちは!移動ナビゲーション
React Navigationを使用してプラットフォーム間ナビゲーションを構築
構成とインストール
まずReact Nativeシステムを構成する.次にRNプロジェクトを作成し、react-navigationを追加します.

 # Create a new React Native App
 #   RN APP
react-native init SimpleApp
cd SimpleApp

# Install the latest version of react-navigation from npm      
npm install --save react-navigation

# Run the new app  ，       
react-native run-android # or:
react-native run-ios

初期化インタフェース
AndroidとiOSの間でコードを共有するために、index.ios.jsとindex.andorid.jsの実際のコードを削除し、import './App'を使用して具体的なコードを実現します.
「App」を作成します.js’
Stack Navigatorの紹介stack navigationの概念を使用するために、StactkNavigatorを使用します.(注:stackはデータ構造のスタック技術であり、後進先出の原理に従う).各からナビゲーションへのscreen(ナビゲーション画面)はスタックのスタックトップに置かれ、戻るとスタックトップから対応するコンポーネントがポップアップする.まずscreenの状況を見てみましょう

//          App.js，export   ,  
import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
//  stack    
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',//           
  };
  render() {
    //            
    return Hello, Navigation!;
  }
}
//       
const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

titleはstatic navigationOptionsに配置されたタイトルの内容で、表示されるインタフェースは以下を見てください.
新しいナビゲーション画面を追加ChatScreen画面を追加

 class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      
        Chat with Lucy
      
    );
  }
}

HomeScreenにbuttonコンポーネントを追加する、routeName Chatを使用してChatScreenに関連付ける.

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      
        Hello, Chat App!
        
    );
  }
}

screen navigation propから得るナビゲーション関数を用いてChatScreenに移行している.しかし、これはStackNavigatorに登録する必要がある.

 const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },//    screen
});

ChatScreenにナビゲートしたり、戻ったりすることができます.
伝達パラメータChatScreenでタイトルをハードコーディングするのは良い方法ではなく、ナビゲーション時にパラメータを伝達することができる.まずHomeScreenのコンポーネントを編集し、nameのパラメータをルーティングに渡す.

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      
        Hello, Chat App!
        
    );
  }
}

ChatScreenのコンポーネントが表示するnameのパラメータを編集することができ、このパラメータはrouteによって伝達される.

 class ChatScreen extends React.Component {
  static navigationOptions = {
    // Nav options can be defined as a function of the navigation prop:
    title: ({ state }) => `Chat with ${state.params.user}`,
  };
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      
        Chat with {params.user}
      
    );
  }
}

Chat screenにナビゲートすると名前が見えますHomeScreenでnameを変更し、変化を見てみましょう.
巣型ナビゲーション
モバイルアプリケーションにおいて様々な形式のナビゲーションを組み合わせることは非常に一般的である.React Navigationのrouterとnavigatorsは組み合わせ式であり、これにより非常に複雑なナビゲーションシステムを定義することができる.
Tab Navigatorの紹介App.jsにTabNavigatorを作成します.

 class RecentChatsScreen extends React.Component {
render() {
  return List of recent chats
}
}

class AllContactsScreen extends React.Component {
render() {
  return List of all contacts
}
}

const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});

MainScreenNavigationがトップレベルのナビゲーションコンポーネントとしてレンダリングされる場合、このように見えます.
スクリーンに巣ナビゲーションを作成する
これらのtabsをappの第1画面に表示したいのですが、スタック内の新しいscreenはtabsを上書きします.前のステップで設定したStackNavigatorにtabsをトップナビゲーションとして追加

 const SimpleApp = StackNavigator({
  Home: { screen: MainScreenNavigator },
  Chat: { screen: ChatScreen },
});

MainScreenNavigatorはscreenとして機能するため、navigationOtionsパラメータを渡すことができる.

 MainScreenNavigator.navigationOptions = {
  title: 'My Chats',
};

各tabsにchatにリンクするボタンを追加します.

各ナビゲーションインターフェースを切り替えることができるように、各ナビゲーションインターフェース間で構成する.
ヘッダの設定
前の例ではStactNavigatorを用いていくつかのscreenを作成した.chat screenにナビゲートすると、navigate関数を通じて特定のパラメータを新しいナビゲーションインタフェースに伝達します.たとえば、chat screenに名前を入力します.

 this.props.navigation.navigate('Chat', { user:  'Lucy' });

userパラメータはchat screenで取得できます.

 class ChatScreen extends React.Component {
  render() {
    const { params } = this.props.navigation.state;
    return Chat with {params.user};
  }
}

ヘッダタイトルの設定
次に、screenパラメータにヘッダのタイトルを設定できます.

 class ChatScreen extends React.Component {
  static navigationOptions = {
    // // Title may be a simple string:
    // title: 'Hello',
     
    // Or the title string may be a function of the 
    navigation prop:   prop     
    title: ({ state }) => `Chat with ${state.params.user}`
  };
  ...
}

右側のボタンを追加
カスタム右ボタンをoptionに追加できます

static navigationOptions = {
  header: {
    right:

和title一样,headeroption可以定义为prop的一个函数.让我们来基于导航参数渲染一个不同的按钮,设定为点击时调用navigation.setParams:

static navigationOptions = {
  title: ({ state }) => {
    if (state.params.mode === 'info') {
      return `${state.params.user}'s Contact Info`;
    }
    return `Chat with ${state.params.user}`;
  },
  header: ({ state, setParams }) => {
    // The navigation prop has functions like setParams, goBack, and navigate.
    let right = (

ヘッドはscreenのルーティングstateとインタラクティブになる.
第一部はこれだけです.

zeroMQ初体験-10.マルチスレッドを優雅に使用

画像をクリックして別の画像に変更します