Question

如何对嵌套元素上特定事件的根类执行某些操作？

这是我的代码。是否可以从帐户类中的应用类调用 onLogout 功能？如果我不使用StactNavigator并只导出帐户类，则可以使用index.js中的 onLogout 函数

index.js

    var Account = require('./account');

    export default class App extends Component {
      onLogout= () => {
      }
      render() {
        return (
            <TabBarIOS selectedTab={this.state.selectedTab}>
              <TabBarIOS.Item}}>
                  <Welcome />
              </TabBarIOS.Item>
              <TabBarIOS.Item}}>
                {this.state.isAuth ? <Account onLogout= {this.onLogout} /> : <AuthView/> }
              </TabBarIOS.Item>
            </TabBarIOS>
        );
      }
    }

account.js

import { StackNavigator } from 'react-navigation';

class Account extends Component {

  constructor(props) {
    super(props);
    this.state = {
      lastName: ''
    };
  }

  handleLogout = () => {
    console.log("Logout");
    // LOGGING IN

    // Next line throws an exception, 'onLogout is not a function'
    // this.props.onLogout(); 
  }

  render() {
    return (
          <Button
            title = "Logout"
            onPress = {this.handleLogout}
          />
    );
  }
}
const AccountView = StackNavigator({
  Home: { screen: Account }
  //Detail : {screnn: DetailView}
});

module.exports = AccountView;

Answer 1

我不确定它会起作用。您可以尝试更改帐户中的功能.js

200 OK 成 handleLogout = () => {}

Answer 2

在将函数传递给index.js

中的组件时，必须绑定该函数

它将是这样的：

 <Account onLogout= {this.onLogout.bind(this)} />

然后在您的帐户组件中，您只需要像这样调用它（就像在您的代码中一样）：

this.props.onLogout();

编辑：在这篇文章中，您对组件的函数回调有了更好的解释： React Native component callback functions

Answer 3

您只需要在代码中替换一行

将onPress = {this.handleLogout}更改为onPress = {this.handleLogout()}

Answer 4

该解决方案需要一些额外的代码，但有效。 :) 包含需要回调函数的组件。你可以在组件中调用this.props。

const AccountView = StackNavigator({
  Home: { screen: (props) => <Account logout={() => this.handleLogout()} {...props}/> }

});

如何在React Native上将calback函数传递给嵌套的StackNavigator

4 个答案: