web-dev-qa-db-ja.com

反応ナビゲーションの戻るボタンのカスタム戻るナビゲーション

ReactNavigationのヘッダーの戻る矢印にカスタムナビゲーションを提供するにはどうすればよいですか？ヘッダーの戻る矢印を使用して、前の画面ではなく、定義した画面に移動します。

ありがとう。

reactjsreact-nativereact-navigation
8
Somename

次の2つのことを試すことができます。

a）ルートルーター（RouterComponentという名前）の代わりにheaderMode: 'none'でsub-StackRoutersを使用します。理想的には、それ以上何もする必要はなく、sub-StackRoutersのヘッダーがルートルーターのヘッダーに表示されます。私は以前に同様に機能していたものを覚えていると思いますが、私はしばらくそれをテストしていませんし、まだこのように機能する可能性は低いと思いますが、それでもテストできます。

b）これは私が現在別の状況で使用しているものです。戻るボタンを手動で含めるには：

import { HeaderBackButton } from 'react-navigation';

const navigationOptions = ({ navigation }) => ({
    headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />,
})

const RouterComponent = StackNavigator({
    Tabs: {
        screen: Tabs
    },
    Profile: {
        screen: ProfileStack,
        navigationOptions
    }
},{
    mode: 'modal',
    headerMode: 'none',
});

上記の解決策が機能しない場合、

NavigationOptionsをProfileStack定義に直接追加してみてください。

const ProfileStack = StackNavigator({
    ProfileHome: { 
      screen: ProfileHome, 
      navigationOptions: ({navigation}) => ({ //don't forget parentheses around the object notation
        title: 'Profile',
        headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />
      })
    },
    ProfileEdit: { screen: ProfileEdit }
  }
12
Gautam Naik