React-Navigation 将函数传递给 screenProps [英] React-Navigation passing functions to screenProps

问题描述

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

I am creating an app using React Native, Expo and React Navigation, and I don't know the correct method for passing props and functions around.

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

I have copied the Expo method for navigators that I will build on, but right now I just have App.js calling the following AppNavigator -> MainSwitchNavigator -> HomeScreen

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

I have then wrapped the main exported App that Expo expects with the Amazon AWS Amplify HOC withAuthenticator. Now I can log in to my app and show hello world securely using Amazon's cognito service.

如果我想注销，可以使用我目前在 App 的 props 上的注销功能.

If I want to log out I can use the signout function bellow that I currently have on the props of 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)

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

For now I just want to pass this function down to my Home Screen so I can add a button and log out.

AppNavigator

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

MainSwitchNavigator

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 的道具.

Which puts its at the point I'm trying to read the props passed in to MainSwitchNavigator.

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

So my question is, what is good practice on sharing functions and state with screens below the main App and how do I pass the signOut function down to the rest of my components?

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

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

编辑

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

I have since worked out how to use screenProps correctly for variables but not for functions. screenProps is passed down through navigators automatically to the screen. So I only have to pass it to the AppNavigator component once and I can access it in HomeScreen. However any functions are not passed down.

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

E.g for variables, if I modify App.js to pass text to the variable signOut and pass that to 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 对象的一部分.

HomeScreen will then show this as part of the this.props object.

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 并执行此操作

However if I pass a function to AppNavigator instead and do this

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

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

screenProps does not get set and I can't access the function signOut. The only thing I can get to work is this

<AppNavigator screenProps={this.signOut}/>

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

But what I need is to create a property of screenProps and pass this down. Any thoughts?

推荐答案

将函数作为 screenProp 传递应该是

passing a function as a screenProp should be

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

然后使用do

this.props.screenProps.signOut()

这篇关于React-Navigation 将函数传递给 screenProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！