Question

我找到了如何在我的组件中使用react-native-router-flux覆盖NavBar中按钮的onLeft和onRight处理程序。所以当我在那里console.log()时，我会看到输出。但是，我似乎无法找到将道具（以及我的州）传递到那里的方法。

我无法通过this.props访问它们，因为它们必须是静态方法。任何的想法？我只是想发送一个动作，但是我需要处理程序中没有的dispatch函数（我正在使用redux）

class ProfileSettings extends Component {
  static rightTitle = "Save";
  static onRight(...props) {
    console.log('right!') // logs 'right' when pressed
    console.log(props)    // logs an array of the connect function (react-redux) + an empty object
  }

谢谢！

Answer 1

您可以使用static renderNavigationBar替换完全自定义的导航栏，这样您就可以使用连接的组件。这是一个带有注销按钮的示例：

import {connect} from 'react-redux'
import {NavBar} from 'react-native-router-flux'

class SettingsNavBar extends NavBar {
    renderRightButton () {
        return <Button title="Button" onPress={this.props.logout} style={styles.settingsRightButton}>
            <Text style={styles.rightButtonText}>Logout</Text>
        </Button>
    }
}

const ConnectedNavBar = connect(null, {logout})(SettingsNavBar)

export class ProfileSettings extends Component {
    static renderNavigationBar (props) {
        return <ConnectedNavBar {...props} />
    }
    // your component here...
}

在react-native-router-flux中覆盖onLeft和onRight处理程序

1 个答案: