React native 为什么navigationOptions=>headerLeft中具有onPress={action}的按钮不起作用？自然反应

我在React Native中工作，实际上我正在尝试实现一种自定义侧菜单，以避免实现DrumerMenu，我只尝试在headerLeft上添加一个图标，但它不起作用，按下时没有任何动作

class HomeScreen extends React.Component {
    static navigationOptions = {
        headerTitle: ('',
            <Image style={{ width: 150, height: 40 }}
                source={require('./images/logo.png')}
            />
        ),
        headerLeft: (
            <TouchableHighlight onPress={this._logout}>
                <Image style={{ width: 40, height: 40 }}
                    source={require('./images/hamburger_icon.png')}
                />
            </TouchableHighlight>
        ),
    }
}

当我尝试将按钮放置在地图视图中时也是如此

<View style={{ flex: 1 }}>

    <MapView
        ...
    >
        <Button onPress={this._logout} title="Logout" />
    </MapView>

</View >

但是同样的按钮，在视图中实现，效果非常好

<View style={{ flex: 1 }}>
     <Button onPress={this._logout} title="Logout" />
    <MapView
        ...
    >
        ...
    </MapView>

</View >

我看到一个解决方案使用了一些组件作为DidMount，但我不知道如何实现它

---

提前感谢。

您正在尝试访问此功能。\u以静态方法注销。不幸的是，正如你所发现的那样，这是行不通的

可以将函数传递给标头。您可以阅读更多有关将函数传递到标头组件的信息

这是相当直截了当的

在组件中，使用注销功能安装setParams 在headerLeft中，使用getParam属性访问函数。 注意我们是如何访问navigationOptions中的导航道具的 以下是一个例子：

class HomeScreen extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: ('',
      <Image style={{ width: 150, height: 40 }}
        source={require('./images/logo.png')}
      />
      ),
      headerLeft: (
        <TouchableHighlight onPress={navigation.getParam('logout')}>
          <Image style={{ width: 40, height: 40 }}
            source={require('./images/hamburger_icon.png')}
          />
        </TouchableHighlight>
      )
    };
  };

  _logout = () => {
    alert('logout');
  }

  componentDidMount () {
    this.props.navigation.setParams({ logout: this._logout });
  }

  render() {
    ...
  }
}

---

您正在尝试访问此。\u以静态方法注销。不幸的是，正如你所发现的那样，这是行不通的

可以将函数传递给标头。您可以阅读更多有关将函数传递到标头组件的信息

这是相当直截了当的

在组件中，使用注销功能安装setParams 在headerLeft中，使用getParam属性访问函数。 注意我们是如何访问navigationOptions中的导航道具的 以下是一个例子：

class HomeScreen extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: ('',
      <Image style={{ width: 150, height: 40 }}
        source={require('./images/logo.png')}
      />
      ),
      headerLeft: (
        <TouchableHighlight onPress={navigation.getParam('logout')}>
          <Image style={{ width: 40, height: 40 }}
            source={require('./images/hamburger_icon.png')}
          />
        </TouchableHighlight>
      )
    };
  };

  _logout = () => {
    alert('logout');
  }

  componentDidMount () {
    this.props.navigation.setParams({ logout: this._logout });
  }

  render() {
    ...
  }
}

---

作为对

如果你用这个。在onPress事件中，您可以使用：

 this.props.navigation.setParams({ logout: this._logout.bind(this) });

---

作为对

如果你用这个。在onPress事件中，您可以使用：

 this.props.navigation.setParams({ logout: this._logout.bind(this) });

---

我仍然有同样的问题，按钮没有动作。我意识到我有另一个组件DidMount，我用它来观察设备在地图上的位置。我必须只在一个组件中写下你给出的行和地图的所有内容吗？是的，你应该只有一个组件。谢谢，你的回答非常有用。我仍然有同样的问题，按钮没有动作。我意识到我有另一个组件DidMount，我用它来观察设备在地图上的位置。我必须只在一个组件中写下你给出的行和地图的所有内容吗？是的，你应该只有一个组件。谢谢，你的回答真的很有帮助