React Native 中 StackNavigator 的 headerRight 中的自定义函数

IT技术 javascript reactjs react-native
2021-05-05 02:34:04

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

我正在使用react导航

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>
  };

}
1个回答

更新 ：

在 navigationOptions 中，你和我在这个问题上引用了grabbou ：

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

和dmhood：

你不能从静态上下文调用 this.saveDetails() 因为实际的 saveDetails 方法是一个类方法。您需要将 saveDetails 设为静态或仅在类之外设置一些辅助函数。

#145 问题中公开的解决方案之一，以及我用于我目前正在开发的应用程序的解决方案之一，是在您的 componentDidMount 生命周期挂钩上使用 setParams，如下所示：

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

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

（在此处查看主存储库的示例）

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

更新 2：

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

更新 3：

关于如何解决这个特定问题的一个很好的讨论可以在官方回购这里找到

其它你可能感兴趣的问题
上一篇在 React Native 中从解析的对象数组渲染图像源 下一篇切片会为我的对象添加孔洞/裂缝