React Native Handle Headerback 与 Redux

Question

我已将 Redux 集成到我的 RN 项目中。我可以使用按钮在屏幕之间导航，但是当我想使用 HeaderBackButton 返回时，它会说：“未定义不是函数”

Github-Repo：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 })}
/>

文本输入已经有几个道具了。在这里，您将值分配给

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

但是使用按钮，您必须分配一个实际的道具名称/变量以传递给您的动作创建者。在这里，您没有实际的道具。因此，它以未定义的形式返回。因此，您必须为该道具声明一个变量名并将其分配给 this.props 之前：

this.props.navBack();

所以可能是这样的：

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

在您的情况下，您可能需要为 prop { back } 指定一个特定值。否则，它会告诉您您的第二个参数也未定义。

这是一个很酷的调试器，可以帮助您查看您的道具是否真的被传递给动作创建者：

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

希望能带来更多帮助而不是让人困惑。祝你好运！