Question

如上所述，如果我在react-native-router-flux中使用自定义navBar，并使用NO position stlyle tag设置样式，那么navBar会在屏幕底部呈现...

所以，我尝试用位置设置样式：＆＃39;绝对＆＃39;，top：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>

为了设计它并将其置于顶部，请记住给它一个“绝对”的位置。和＆＃39; top＆＃39; 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和尺寸：

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

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

2 个答案: