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'
  },
});

此致 Przemek

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>
    );
  },

还有更好的方法吗？

Answer 2

很简单Navigator没有将自己使用的绝对定位注入到自定义组件中，所以它只是由flexbox布局。

Navigator.NavigationBar的默认样式如下（带有背景透明度规则）：

position: 'absolute',
top: 0,
left: 0,
right: 0,

只需更改您的navber样式即可包含以上内容：

navbar: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    alignItems: 'center',
    backgroundColor: '#fff',
    borderBottomColor: '#eee',
    borderColor: 'transparent',
    borderWidth: 1,
    justifyContent: 'center',
    height: 44,
    flexDirection: 'row'
}, [...]

Answer 3

在<Navigator>组件上，添加sceneStyle={{paddingTop: 44}}作为其中一个道具

按照你的例子：

<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>}
  sceneStyle={{paddingTop: 44}}
/>

反应原生NavigationBar位置

3 个答案: