web-dev-qa-db-ja.com

React-native-navigation：goBack（）が機能しない

React Redux with Navigation in React Nativeを使用しています。ナビゲーションは正常に機能していますが、1つの画面でgoBack（）関数が機能しません。私たちはなぜですか？

これはヘッダー設定です：

static navigationOptions = {
        header: ({ state, goBack }) => {
            return {
                title: state.params.name,
                right: (<Button
                    title={'Done'}
                    onPress={() => goBack()}
                />)

            }
        }
    }

これはディスパッチされたイベントです：

enter image description here

画面は表示されません。デバイスの画面は同じままです。

reactjsreact-nativereact-reduxreact-navigation
6
m43x

<Button onPress={() => this.props.navigation.goBack(null)}>をお試しください

nullを入力パラメーターとして使用すると、最後のページ（即時履歴）に移動し、ネストされたStackNavigatorsは、子ナビゲーターがスタック内にすでに1つのアイテムしかない場合に、親ナビゲーターに戻ります。

それらのドキュメントによると、それを変更する計画があるため、将来変更される可能性があります。

詳細については、 here を確認してください。

11
dinidu

GoBack（）アクションを使用したい場合は、ビュー（ヘッダーではなく）で次のようにする必要があると思います。

<Button onPress={() => this.props.navigation.goBack()}>
4
Claus Shapeshifter

GoBackは少し不安定で、私のために機能するアクションを明示的にディスパッチします。

import { NavigationActions } from 'react-navigation';

this.props.navigation.dispatch(NavigationActions.back())
3
spedy

私は同じ問題を抱えています。理由はわかりませんが、goBack（null）と書くとうまくいきます：|

1
Javier Hernández Sansalvador

これに投稿されたソリューションによると github issue 。 nullをgoBack関数の引数として渡すと、私と同じようにうまく機能します。 OPの場合、次のコードが機能するはずです。

static navigationOptions = {
        header: ({ state, goBack }) => {
            return {
                title: state.params.name,
                right: (<Button
                    title={'Done'}
                    onPress={() => goBack(null)}
                />)

            }
        }
    }
0
Asym

github issue に投稿された実用的な解決策は次のとおりです：

setTimeout(this.props.navigation.goBack, 0)

どうやらこのバグは最近のリグレッションです。

0
Andrew Schreiber

反応ナビゲーション

<TouchableOpacity onPress={()=>{ this.props.navigation.goback() }}>
 <Text>Back</Text>
</TouchableOpacity>

反応ネイティブルーターフラックス

<TouchableOpacity onPress={() => { Actions.pop() }}>
 <Text>Back</Text>
</TouchableOpacity>
0
SaGaR Patel

これに対する解決策は次のとおりです。

これは私の作業コードです：-

static navigationOptions = ({navigation, screenProps}) => {
     return {
         title:'SECOND',
         headerStyle:{ backgroundColor: '#ffffff'},
         headerTitleStyle:{fontSize:12},
         headerLeft:<TouchableOpacity onPress={()=>navigation.goBack()}>
                      <Image source={{uri:'back_btn'}} style={{height: 20, width: 20,marginLeft:10,}}/>
                  </TouchableOpacity>
     }
  }
0
Swapnil Panchal

StackActions AP​​Iを使用すると、アプリのナビゲーションが機能しなくなります。 （シンプルで信頼性の高い）NavigationActions AP​​Iのみを使用して画面に移動すると、戻るボタンが機能しました。

0
Andrew Koster