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

Question

如前所述，如果我在react-native-router-flux中使用自定义的navBar，并使用NO位置stlyle标签对其进行样式设置，则navBar会在屏幕底部呈现。

因此，我尝试使用以下位置设置样式：“绝对”，顶部：0，右侧：0，左侧：0，我的navBar消失了:(有什么建议吗？

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

Answer 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：对于宽度和高度，更好的解决方案是使用Navigator和Dimensions：

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

Answer 2

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

固定：

在HeaderWithIcon.js中

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