React-Navigation 将函数传递给 screenProps

Question

我正在使用 React Native、Expo 和 React Navigation 创建一个应用程序，但我不知道传递 props 和函数的正确方法。

我已经复制了我将在其上构建的导航器的 Expo 方法，但现在我只有 App.js 调用以下 AppNavigator -> MainSwitchNavigator -> HomeScreen

然后，我使用带有身份验证器的 Amazon AWS Amplify HOC 包装了 Expo 期望的主要导出应用程序。现在我可以使用亚马逊的 Cognito 服务登录到我的应用程序并安全地显示 hello world。

如果我想注销，我可以使用我目前在 App 的道具上使用的注销功能。

class App extends React.Component {

  constructor(props) {
    super(props);
    this.signOut = this.signOut.bind(this);
  }

  signOut() {
    Auth.signOut().then(() => {
      this.props.onStateChange('signedOut', null);
      console.log("signed out");
    }).catch(e => {
      console.log(e);
    });
  }

  render () {
    return (
        <View style={styles.container}>
          <AppNavigator screenProps={{
            signOut: () => {this.signOut}
            }}/>
        </View>
    );
  }
}

export default withAuthenticator(App)

现在我只想将此功能传递到我的主屏幕，以便我可以添加一个按钮并注销。

应用导航器

export default createAppContainer(
  createSwitchNavigator({
    // You could add another route here for authentication.
    // Read more at https://reactnavigation.org/docs/en/auth-flow.html
    Main: { screen: MainSwitchNavigator, params: { signOut: this.props.screenProps.signOut } },
  },
  {
    initialRouteName: 'Main'
  })
);

主开关导航器

export default createSwitchNavigator({
    // Home: { screen: HomeScreen }
    Home: { screen: HomeScreen, params: { signOut: this.props.navigation.params.signOut } }
},{
    initialRouteName: 'Home'
});

主屏幕

class HomeScreen extends Component {
  render () {
  return (
    <View>
      <Text>Main App Here</Text>
      <Button 
        onPress={this.props.navigation.params.signOut()} 
        title="Sign Out" 
      />
    </View>
  )};
}

export default HomeScreen;

目前我收到错误

undefined is not an object (evaluating 'this.props.navigation')
<unknown>
MainSwitchNavigator.js
8:62

这表明我正在尝试读取传递给 MainSwitchNavigator 的道具。

所以我的问题是，在主应用程序下方的屏幕上共享功能和状态的好做法是什么，以及如何将 signOut 功能传递给我的其余组件？

================================================== ======================

编辑

从那以后，我已经研究出如何正确地将 screenProps 用于变量而不是函数。screenProps 通过导航器自动传递到屏幕。所以我只需要将它传递给 AppNavigator 组件一次，我就可以在 HomeScreen 中访问它。然而，任何功能都不会传递下去。

例如对于变量，如果我修改 App.js 将文本传递给变量 signOut 并将其传递给 screenProps

class App extends React.Component {

  constructor(props) {
    super(props);
    this.signOut = this.signOut.bind(this);
  }

  signOut() {
    Auth.signOut().then(() => {
      this.props.onStateChange('signedOut', null);
      console.log("signed out");
    }).catch(e => {
      console.log(e);
    });
  }

  render () {
    return (
        <View style={styles.container}>
          <AppNavigator screenProps={{signOut: "some text"}}/>
        </View>
    );
  }
}

HomeScreen 然后会将其显示为 this.props 对象的一部分。

class HomeScreen extends Component {
  render () {
  return (
    <View>
      <Text>Main App Here</Text>
      <Button 
        onPress={console.log(JSON.stringify(this.props))} 
        //  onPress={alert(this.props.screenProps.var3)} 
        title="Sign Out" 
      />
    </View>
  )};
}

export default HomeScreen;

但是，如果我将一个函数传递给 AppNavigator 并执行此操作

<AppNavigator screenProps={{signOut: () => {this.signOut}}}/>

screenProps 未设置，我无法访问函数 signOut。我唯一能上班的就是这个

<AppNavigator screenProps={this.signOut}/>

但我需要的是创建一个 screenProps 的属性并将其传递下去。有什么想法吗？

Answer 1

传递一个函数作为 screenProp 应该是

<AppNavigator screenProps={{signOut: this.signOut}} />

然后使用做

this.props.screenProps.signOut()