web-dev-qa-db-ja.com

ホーム画面のナビゲーションスタックをリセットする（React NavigationおよびReact Native）

React Navigation およびReact Nativeのナビゲーションに問題があります。ナビゲーションをリセットしてホーム画面に戻ることです。

DrawerNavigator内にStackNavigatorを構築しましたが、ホーム画面と他の画面間のナビゲーションは機能しています。しかし、問題は、ナビゲーションスタックがどんどん大きくなることです。スタックから画面を削除する方法がわかりません。

たとえば、ホーム画面から設定画面に移動し、次に入力画面に移動し、最後に再びホーム画面に移動すると、ホーム画面はスタックに2回表示されます。戻るボタンを使用すると、アプリから抜け出すのではなく、再び入力画面に戻ります。

ホームボタンを再度選択するとき、スタックのリセットは素晴らしいでしょうが、私はこれを行う方法を知りません。 ここ 誰かが同様の問題を抱えている他の人を助けようとしましたが、解決策はうまくいきませんでした。

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack
  }},
  {
    contentComponent: HamburgerMenu
  }
)

これは引き出し画面の簡単な例です

export default class HamburgerMenu extends Component {
  render () {
    return <ScrollView>
      <Icon.Button
        name={'home'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Home')}}>
        <Text>{I18n.t('home')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'settings'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Settings')}}>
        <Text>{I18n.t('settings')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'entry'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Entry')}}>
        <Text>{I18n.t('entry')}</Text>
      </Icon.Button>
    </ScrollView>
  }
}

あなたが私を助けてくれることを願っています。これはナビゲーションの重要な部分であり、解決策は素晴らしいでしょう！

javascriptreact-nativenavigationreact-navigation
34
Daniel

これは私がそれをする方法です：

reset(){
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName: 'Menu'})
                    ]
                  }));
  }

少なくとも「メニュー」を「ホーム」に置き換えます。 this.props.navigationを実装に適合させることもできます。

バージョン> 2では、次のとおりです。

import { NavigationActions, StackActions } from 'react-navigation';
        const resetAction = StackActions.reset({
                index: 0,
                actions: [NavigationActions.navigate({ routeName: 'MainActivity' })],
            });

this.props.navigation.dispatch(resetAction);
42
Robin Dehu

ここに私がそれをする方法があります：

import { NavigationActions } from 'react-navigation'

this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })]
}))

重要な部分はkey: nullです。

子からナビゲーター親へナビゲーターをナビゲートしている間にスタックを消去します。

このエラーが発生した場合は、それを実行してください。

enter image description here

アニメーションの場合、私は

// https://github.com/oblador/react-native-animatable
import * as Animatable from 'react-native-animatable'

自分ですべてのアニメーションを制御するだけです。 <Animatable.View>でラップして、必要なanyコンポーネントに配置します。

19
agm1984

反応ナビゲーションの最新バージョンでは、StackActionsを使用してスタックをリセットする必要があります。次のコードをご覧ください。

// import the following
import { NavigationActions, StackActions } from 'react-navigation'

// at some point in your code
resetStack = () => {
 this.props
   .navigation
   .dispatch(StackActions.reset({
     index: 0,
     actions: [
       NavigationActions.navigate({
         routeName: 'Home',
         params: { someParams: 'parameters goes here...' },
       }),
     ],
   }))
}
12
Gustavo Garcia

Backを使用するには、パスに関連付けられた一意のキーを見つける必要があります。ナビゲーションレデューサー内で、既存の状態を検索して、そのパスを使用してスタック上の最初のルートを見つけ、そのキーを取得してそれをBackに渡すことができます。 [戻る]は、指定したパスの前の画面に移動します。

  let key;

  if (action.payload) {
    // find first key associated with the route
    const route = action.payload;

    const routeObj = state.routes.find( (r) => r.routeName === route );

    if (routeObj) {
      key = { key: routeObj.key };
    }
  }

  return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state );
3
peterorum

答えはcreateSwitchNavigatorであり、ナビゲーションを積み重ねないものです。ホーム画面/スタックを使用してcreateSwitchNavigatorに認証画面/ナビゲーターを追加します。

これにより、自宅からナビゲートしてログインするとき、スタックは保持されません。

詳しくは https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

1
Nelson Bass

StackNavigatorとDrawerNavigatorでは、Homeをキーとして使用しました。Homeは一意である必要があり、それが問題を引き起こす理由です。 DrawerNavigator内でHomeをStackに置き換えてみてください。

これが役立つことを願っています:)

0
Vijay Suryawanshi

ポップアクションにより、スタック内の前の画面に戻ります。 nパラメーターを使用すると、ポップバックする画面の数を指定できます。

n-数値-ポップバックする画面の数。

「React-navigation」から{StackActions}をインポートします。

const popAction = StackActions.pop（{n：1、}）;

this.props.navigation.dispatch（popAction）;

0
Kosalram Rama Krishnan