javascript - 使用react-native-meteor时将导航栏按钮添加到react-native-navigation

标签 javascript react-native

我正在使用react-native-navigationreact-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);

最佳答案

您可以在导航器上动态设置它们:

this.props.navigator.setButtons({
  rightButtons: [
    { title: 'Reset', id: 'resetButton' },
    { title: 'Submit', id: 'submitButton' }
  ]
});

关于javascript - 使用react-native-meteor时将导航栏按钮添加到react-native-navigation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39398061/

相关文章:

javascript - 将对象数组 append 到 HTML 文件中

react-native - 可以对修改其导航 Prop 的组件方法进行单元测试吗?

react-native - react-navigation - 从子组件导航

javascript - React-native:如何根据上一屏幕上选择的数字呈现输入并能够存储输入

react-native - React Native "Cannot find module ' react-native'"问题

javascript - 生成差异 JSON

javascript - html5中如何拆分单元格

reactjs - React Redux 处理表单无法读取未定义的属性

javascript - 检查两个日期之间的差异并在分钟后附加零的代码。?

javascript - Bootstrap slider - CSS 显示不正确