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->主屏幕

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 withAuthenticator包装了Expo期望的主要导出应用程序.现在，我可以登录到我的应用程序，并使用Amazon的cognito服务安全地向您展示世界.

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道具上使用的退出功能.

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屋！