在使用react-native-meteor时,为react-native-navigation添加导航栏按钮

Adding navbar buttons to react-native-navigation while using react-native-meteor

本文关键字:添加 react-native-navigation 导航 按钮 react-native-meteor      更新时间:2023-09-26

我将react-native-navigation与react-native-meteor结合使用。从Meteor 1.3开始,建议在使用React时使用createContainer方法。但是,如果我从类定义中删除"导出默认"并将其移动到导出默认createContainer(params=>{…}, MyClass),我松散了导航栏按钮的定义。我该怎么写才能不让导航栏按钮的定义松散?谢谢:)

下面是我的组件的全部代码:

import React, {Component} from 'react';
import {
  Text,
  View,
  StyleSheet,
} from 'react-native';
import Meteor, { createContainer } from 'react-native-meteor';
class TestScreen extends Component {
    static navigatorButtons = {
        rightButtons: [{
            title: 'Reset',
            id: 'resetButton'
        }, {
            title: 'Submit',
            id: 'submitButton'
        }]
    };
    constructor(props) {
        super(props);
        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(
            this));
    }
    render() {
        return ( < View > < Text > Some text < /Text>
      </View > );
    }
    onNavigatorEvent(event) {
        if (event.type == 'NavBarButtonPress') {
            if (event.id == 'resetButton') {
                // reset here
            }
            if (event.id == 'submitButton') {
                // submit here
            }
        }
    }
}
export default createContainer(params => {
    const handle = Meteor.subscribe('records');
    return {
        records: Meteor.collection('records').findOne(),
    };
}, TestScreen);

您可以在navigator:

上动态设置它们。
this.props.navigator.setButtons({
  rightButtons: [
    { title: 'Reset', id: 'resetButton' },
    { title: 'Submit', id: 'submitButton' }
  ]
});