リアクションネイティブ：シーン別navigatiorBarを更新

Question

シーンによって渡されたパラメータでnavigationBarを更新する方法はありますか？私のシーンではなく私が見つけた方法で私が意味する、私はそのような名前、背中、次のボタンのテキストとしてのparamsを通過したい：私は、タイトルとしての私のナビゲーションバーののparamsに渡す

this.props.navigator.push({ name: 'Second', component: Second });

と

ありがとうございます。

Answer 1

Navigator.NavigationBarのrouteMapper小道具を使用してこれを行うことができます。 routeMapperは、LeftButton,Title、およびRightButtonという3つの関数を定義するオブジェクトです。ナビゲーションバーは、レンダリングする対象を決定するためにこれを使用します。これらの機能のそれぞれは、4つの引数を受け取り：

• ルートオブジェクト
• ナビゲータコンポーネント
• 電流経路スタックナビゲータコンポーネントの
• 電流navStateルートオブジェクトのインデックス

たとえば、左右のボタンのテキストとタイトルをカスタマイズできるナビゲーションバーを作成する場合は、次のような操作を行うことができます。

const NavigationBarRouteMapper = { 
 

 
    LeftButton(route, navigator, index, navState) { 
 
    if (route.leftButtonText && route.leftButtonHandler) { 
 
     return (
 
     <TouchableOpacity 
 
      onPress={route.leftButtonHandler} 
 
     > 
 
      <Text>{route.leftButtonText}</Text> 
 
     </TouchableOpacity> 
 
    ); 
 
    } 
 
    return null; 
 
    }, 
 

 
    RightButton(route, navigator, index, navState) { 
 
    if (route.rightButtonText && route.rightButtonHandler) { 
 
     return (
 
     <TouchableOpacity 
 
      onPress={route.rightButtonHandler} 
 
     > 
 
      <Text>{route.rightButtonText}</Text> 
 
     </TouchableOpacity> 
 
    ); 
 
    } 
 
    return null; 
 
    }, 
 

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

あなたのナビゲーションバーを作成するときは、routeMapper小道具にこのオブジェクトを渡すことができます。

<Navigator.NavigationBar 
    routeMapper={NavigationBarRouteMapper} 
/> 

そして、あなたが渡すことによって、例えば、新しいタイトルをレンダリングすることができますあなたの a titleプロパティ：

this.props.navigator.push({ 
    id: 'your-route-id', 
    title: 'Custom Title', 
}); 

ナビゲーションバーには、上記のようにrouteMapperオブジェクトにプッシュしているこのrouteオブジェクトが表示されます。