reactjs - react native 导航栏位置

Question

我在 React Native 中玩了一下 Navigator。不幸的是，导航栏出现在屏幕底部。你能告诉我如何将导航栏放在屏幕顶部吗？下面是我的代码:

var React = require('react-native');
var {
  View,
  Text,
  StyleSheet,
  Navigator
} = React;

var Signin = require('./components/authentication/signin');
var Signup = require('./components/authentication/signup');
var Groceries = require('./components/groceries/groceries.js');
var AddMeal = require('./components/groceries/addMeal.js');

var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
var CustomSceneConfig = Object.assign({}, BaseConfig, {
  springTension: 200,
  springFriction: 1,
});
var ROUTES = {
  signin: Signin,
  signup: Signup,
  groceries: Groceries,
  addmeal: AddMeal,
};

module.exports = React.createClass({
  renderScene: function (route, navigator) {
    var Component = ROUTES[route.name];
    return <Component route={route} navigator={navigator} />;
  },

  _configureScene: function (route) {
    return CustomSceneConfig;
  },

  render: function () {
    return (
        <Navigator
          style={styles.container}
          initialRoute={{name: 'groceries'}}
          renderScene={this.renderScene}
          configureScene={this._configureScene}
          navigationBar={
            <View style={styles.navbar}>
              <Text style={styles.backButton}>Back</Text>
            </View>}
        />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  navbar: {
    alignItems: 'center',
    backgroundColor: '#fff',
    borderBottomColor: '#eee',
    borderColor: 'transparent',
    borderWidth: 1,
    justifyContent: 'center',
    height: 44,
    flexDirection: 'row'
  },
});

问候，普热梅克

Answer 1

谢谢丹尼尔，这可行，但仍然有一个小问题。该导航栏覆盖场景，因为它的高度为:44。我应该为每个场景的最外部组件设置 marginTop:44 吗？或者也许有一种方法可以将其设置为每个场景的导航器级别？也许在像这样的 renderScene 方法中:

renderScene: function (route, navigator) {
    var Component = ROUTES[route.name];
    return (
      <View style={{marginTop: 44}}>
        <Component route={route} navigator={navigator} />
      </View>
    );
  },

还有更好的办法吗？