Пользовательская панель навигации React-native-router-flux отображает в нижней части представления

Как указано, если я использую настраиваемый navBar в react-native-router-flux и задаю ему стиль без тега position stlyle, тогда navBar отображается в нижней части экрана ...

Итак, я попытался установить стиль с position: 'absolute', top: 0, right: 0, left: 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'
  }
};

react-native reactjs react-redux navbar react-native-router-flux
person Ally Haire    schedule 11.01.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward 

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

И для того, чтобы стилизовать его и поместить вверху, не забудьте присвоить ему позицию 'absolute' и 'top', равную 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;
person SimoT    schedule 19.04.2017

arrow_upward
0
arrow_downward

Неважно ... Я понимаю, что мой HeaderView заключен в два представления, и я стилизовал не внешний, а внутренний. Оставьте это здесь как пример кода для других, если это разрешено ...

Исправить:

В HeaderWithIcon.js

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