Question

我有以下组件，我试图在标题区域中有一些左右标题按钮。但是，我无法调用我的函数logout。有谁知道我可能做错了什么以及如何解决它？

我正在使用react-navigation

export default class HomeScreen extends Component<Props> {

  constructor(props) {
    super(props);
    this.state = { refreshing: false }
  }

  logout = async () => {
    alert("HI");
    AsyncStorage.setItem('current_appid', '');
    this.props.navigation.navigate('Identification');
  }

  static navigationOptions = {
    headerStyle: { backgroundColor:"#fff", height:60},
    headerTitleStyle: { color:"#3F61E7", fontSize: 24},
    headerBackground: "#fff",
    title: 'My Title',
    headerRight: <Text style={{marginRight:15, color:"#3F61E7", fontWeight:"400", fontSize:16}}>Settings</Text>,
    headerLeft: <Text onPress={async () => this.logout} style={{marginLeft:15, color:"#3F61E7", fontWeight:"400", fontSize:16}}>Log Out</Text>
  };

}

Answer 1

更新：

在navigationOptions中，您和我引用此issue：

您无法访问状态。您可以做的是使用this.context，externalise props（父组件/ redux）或查看此帖子#145

dmhood：

你不能从静态上下文中调用this.saveDetails（），因为实际的saveDetails方法是一个类方法。您需要将saveDetails设置为static，或者只需要在类之外创建一些辅助函数。

＃145问题中暴露的解决方案之一，我用于我目前正在处理的应用程序的解决方案之一是在componentDidMount生命周期挂钩上使用setParams，如下所示：

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

然后你可以使用另一种方式来声明你的navigationOptions，并通过声明一个接受导航对象参数的函数（使用导航state（包含params !!））

（请参阅主回购here上的示例）

  YourComponent.navigationOptions = props => {
      const { navigation } = props;
      const { state } = navigation;
      const { params } = state;
      return {
         /* your navigationOptions props */,
         headerRight: <Button onPress={() => params.yourfunction()} />
      }
  }

更新2：

如果您想坚持使用其他语法，请记住您的headerRight组件将导航对象作为包含导航状态及其参数的道具接收！

更新3：

关于如何解决这一特定问题的良好讨论可以在官方报告中找到here

StackNavigator的headerRight中的自定义函数作出反应原生

1 个答案:

更新：

更新2：

更新3：