Native Handle Headerback with Reux

Question

RNプロジェクトにReduxを統合しました。私はボタンで画面間を移動することができますが、私はHeaderBackButtonに戻りたいとき、それは言う：「未定義の関数ではありません」

のGithub-レポ：https://github.com/bayraktarhasan/React-Navigation-Redux-Globalization-Example.git

マイフィードコンポーネント：

class Feed extends Component { 
    static navigationOptions = { 
    title: 'Hello Ahmet', 
    headerLeft: <HeaderBackButton onPress={this.goBack()} />, 
    } 
    constructor(props) { 
    super(props); 
    this.goBack = this.goBack.bind(this); 
    } 

    goBack =() => { 
    this.props.navBack(); 
    } 

    render() { 
    return (

     <View style={styles.container}> 
     <Text>{I18n.t('feedComponent')}</Text> 
     <Button 
      title={I18n.t('back')} 
      onPress={this.goBack} 
     /> 
     </View> 
    ); 
    } 
} 

export default connect(null, { navBack, navToProfile })(Feed); 

リデューサー：

import { NAVIGATE_BACK, NAVIGATE_PROFILE, NAVIGATE_FEED } from '../Actions/types'; 

const firstAction = AppNavigator.router.getActionForPathAndParams('Main'); 
const initialNavState = AppNavigator.router.getStateForAction(
    firstAction 
); 


function nav(state = initialNavState, action) { 
    console.log(action.type); 
    let nextState; 
    switch (action.type) { 
    case NAVIGATE_BACK: 
     nextState = AppNavigator.router.getStateForAction(
        NavigationActions.back(), 
        state 
       ); 
     break; 

Answer 1

これは、暗闇の中でだけでショットですが、GoBackのは本当に定義されていません。多分試してみてください：

const goBack =() => { 
    this.props.navBack(); 
} 

私は同じ問題を昨日持っていたので、これは非常に皮肉です。ここに投稿がありますHow to properly assign a url as a prop to action creator

あなたの場合は、上記のリンクからはあまり明確ではないかもしれません。しかし、私は何を発見したのか説明しようとします（私は何らかの専門家ではありません）。あなたのコードは、テキスト入力や日付ピッカーなどで動作します。このように：

<TextInput 
     label="Model" 
     placeholder="4020" 
     value={this.props.model} 
     onChangeText={value => this.props.entryUpdate({ prop: 'model', value })} 
/> 

テキストの入力には既に2つの小道具があります。ここで値を

に設定します

this.props.<whatever you want the specific object/prop to be called> 

ボタンを使用すると、アクションクリエイターに渡す実際の小道具名/変数を割り当てる必要があります。ここには実際の小道具はありません。だから、それは未定義として戻ってきます。だから、多分それは次のようになり

this.props.navBack(); 

：

const goBack =() => { 
    const { back } = this.props 
    this.props.navBack({ back }); 
} 

そして、あなたの場合には、あなたが必要な場合がありますので、あなただけの前にその小道具のための変数名を宣言しthis.propsに割り当てる必要がありprop {back}の特定の値を指定します。それ以外の場合は、2番目の引数も定義されていないことがわかります。

ここにあなたの小道具は、実際にアクションの作成者に渡されているかどうかを確認できますクールなデバッガです：

https://github.com/jhen0409/react-native-debugger

希望、それは混乱よりも多くのを助けます。がんばろう！