Question

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

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

然后我用Amazon AWS Amplify HOC withAuthenticator包装了Expo期望的主要导出应用程序。现在，我可以登录到我的应用程序，并使用Amazon的认知服务安全地向您展示世界。

如果要注销，可以使用当前在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)

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

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的道具，这正是它的重点。

所以我的问题是，与主应用程序下方的屏幕共享功能和状态的良好做法是什么，如何将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}} />

然后使用do

this.props.screenProps.signOut()

Answer 2

MainSwitchNavigator

export default createSwitchNavigator({
    // Home: { screen: HomeScreen }
    Home: { screen: HomeScreen }
},{
    initialRouteName: 'Home'
});

在导航上发送数据

this.props.navigation.navigate('Signout' , { name: 'John Doe', email: 'john@doe.com' })

React-Navigation将函数传递给screenProps

2 个答案: