React-native-router-flux 自定义导航栏呈现在视图底部答案

【问题标题】：React-native-router-flux custom navbar renders at the bottom of the viewReact-native-router-flux 自定义导航栏呈现在视图底部
【发布时间】：2017-01-11 13:38:07
【问题描述】：

如前所述，如果我在 react-native-router-flux 中使用自定义导航栏，并使用 NO 位置样式标记对其进行样式设置，那么导航栏将呈现在屏幕底部...

所以，我尝试使用 position: 'absolute', top: 0, right:0, left: 0 设置样式并且我的导航栏消失了:(有什么建议吗？

Router.js

<Scene 
  key="api" 
  hideNavBar={false} 
  navBar={HeaderWithIcon} 
  component={APITest} 
/>

HeaderWithIcon.js

import React, {Component} from 'react';
import { View, Image, Text } from 'react-native';
import { menuStyles } from './styles';

class HeaderWithIcon extends Component {

  constructor(props) {
    super(props);
  }

    render() {
      const icon =
        require('../../assets/images/myImg.png');

    return (
      <View>
        <View style={[menuStyles.view, this.props.style]}>
          <Image source={icon} style={[menuStyles.icon, this.props.iconStyle]} />
        </View>
      </View>
    );
  }
};

export default HeaderWithIcon;

styles.js

import { HEADER } from '../../global/margins';
import { PRIMARY_COLOUR, SHADOW_COLOUR } from '../../global/colours';

export const menuStyles = {
  view: {
    flexDirection: 'row',
    //height: HEADER.height,
    width: null,
    backgroundColor: PRIMARY_COLOUR,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  //  paddingTop: HEADER.padding,
    shadowColor: SHADOW_COLOUR,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0
  },
  icon: {
    width: HEADER.icon,
    height: HEADER.icon,
    alignSelf: 'center'
  }
};

【问题讨论】：

标签： reactjs react-native navbar react-redux react-native-router-flux

【解决方案1】：

<View style={styles.navbarStyle}>

            <View style={styles.navContainer}>

                <TouchableOpacity onPress={()=>Actions.get('drawer').ref.toggle()}>
                    <Image source={require('../../img/menu.png')} resizeMode="contain" color="white" style={styles.menu} />
                </TouchableOpacity>    
                <View style={styles.navbarTitle}>
                    <Text style={styles.title}>NavBar</Text>
                </View>
                <TouchableWithoutFeedback onPress={this.loginUser}>
                    <View style={styles.signIn}>
                        <Text style={styles.title}>Login</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
</View>

为了设置样式并将其放在顶部，请记住给它一个“绝对”的位置和 0 的“顶部”：

navbarStyle:{
    flex:1,
    flexDirection:'row',
    alignItems: 'center',
    height ,
    position: 'absolute', //necessary because if no react-native-router-flux will put navbar at bottom ,bug maybe!
    top:0,
    width,
    backgroundColor: '#009688',
    elevation:10

}

PS：对于宽度和高度，更好的解决方案是使用导航器和尺寸：

const {width} = Dimensions.get('window');
const height = Navigator.NavigationBar.Styles.General.NavBarHeight;

【讨论】：

【解决方案2】：

没关系...我意识到我的 HeaderView 包含在 2 个视图中，我没有设置外部的样式，而是内部的样式。如果允许，将其留在这里作为其他人的示例代码.....

修复：

在 HeaderWithIcon.js 中

    return (
    <View style={[menuStyles.view, this.props.style]}>
      <Image source={icon} style={[menuStyles.icon, this.props.iconStyle]} />
    </View>
);

【讨论】：