web-dev-qa-db-ja.com

特定の画面で反応ナビゲーションを使用して戻るボタンを変更する

ナビゲーションライブラリとしてreact-navigationを使用していますが、特定の画面の[戻る]ボタン（react-navigationによって自動的に追加される）機能をどのように変更できますか？

画面のスタックを1ステップ進めるのではなく、スタックを2ステップ戻すようにしたいと思います。または、スクリーン名を付けて手動で実行します（これも1つのコンポーネントのみです）。

ありがとう。

reactjsreact-nativereact-navigation
6
greW

特定の画面の[戻る]ボタンは、その画面のnavigationOptionsで上書きできます。 react-navigation docs で戻るボタンのオーバーライドに関する詳細情報を読むことができます。

ドキュメントの例

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

戻るボタンのオーバーライド

戻るボタンは、ユーザーが現在の画面から戻ることができる場合はいつでもStackNavigatorに自動的にレンダリングされます。つまり、スタックに複数の画面がある場合は常に戻るボタンがレンダリングされます。

一般的に、これはあなたが望むものです。ただし、状況によっては、上記のオプションを使用して[戻る]ボタンをカスタマイズすることもできます。この場合、headerLeftで行ったように、headerRightを指定できます。 、[戻る]ボタンを完全にオーバーライドします。

5
bennygenel

それぞれ3つの画面A、B、Cがあることを考慮してください。そのため、StackNavigatorの戻るボタンのデフォルトの機能は次のとおりです。-画面Cで戻るボタンを押すと、前の画面、つまり画面Bに移動します。これを無効にするには、画面Cで次のようにします。 -

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
 }
}
15
Varun Gupta

スタックナビゲーターの作成中にこれを行うこともできます。反応ナビゲーションv4の時点で更新されました。

import { createStackNavigator, HeaderBackButton } from "react-navigation-stack";

const yourStackNavigator = createStackNavigator({
  SomeRoute: SomeScreen,
  SpecificRoute: {
    screen: SpecificScreen,
    navigationOptions: ({ navigation }) => {
      return {
        headerLeft: (<HeaderBackButton onPress={_ => navigation.navigate("Somewhere")}/>)
      }
    }
  },
});
3
Rubek Joshi