javascript - React native responsive header height - Stack Overflow

admin管理员组

文章数量:1024966

Im trying to set my header height so its responsive for tablets and smartphones. I've have tried using flex column:

const headerStyle = {
  paddingHorizontal: theme.metrics.mainPadding,
  paddingTop: 0,
  paddingBottom: 0,
  backgroundColor: theme.colors.blue,
  flex: 0.5,
  flexDirection: 'column',
};

However, the header looks ok on a tablet but too tall on a smartphone.

What is the best way to set dimensions for different devices?

EDIT:

I have this function:

export function em(value: number) {
  return unit * value;
}

And I am now using it in my stylesheet:

  headerHeight: em(6),
  headerImageWidth: em(3),
  headerImageHeight: em(3),
  headerLogoHeight: em(6),
  headerLogoWidth: em(20),

The image looks ok on tablet, but now on smartphone its too small. If i understand correctly, I need to use dimensions.width to set an appropriate unit value in my function?

Smartphone

Tablet

Im trying to set my header height so its responsive for tablets and smartphones. I've have tried using flex column:

const headerStyle = {
  paddingHorizontal: theme.metrics.mainPadding,
  paddingTop: 0,
  paddingBottom: 0,
  backgroundColor: theme.colors.blue,
  flex: 0.5,
  flexDirection: 'column',
};

However, the header looks ok on a tablet but too tall on a smartphone.

What is the best way to set dimensions for different devices?

EDIT:

I have this function:

export function em(value: number) {
  return unit * value;
}

And I am now using it in my stylesheet:

  headerHeight: em(6),
  headerImageWidth: em(3),
  headerImageHeight: em(3),
  headerLogoHeight: em(6),
  headerLogoWidth: em(20),

The image looks ok on tablet, but now on smartphone its too small. If i understand correctly, I need to use dimensions.width to set an appropriate unit value in my function?

Smartphone

Tablet

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Aug 2, 2017 at 15:09 Bomber asked Aug 2, 2017 at 13:34 BomberBomber 11k2727 gold badges9797 silver badges175175 bronze badges 1

• You will have to use the 'Dimensions' module from 'react-native' and modify your style at runtime. Responsive a la react-native. Here is a good read : medium./@elieslama/… – MaieonBrix Commented Aug 2, 2017 at 14:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I can think of two ways

Using flex

<View style={{flex:1}}>
  <View style={{flex:0.2}}>
     <Text>Header</Text>
  </View>

  <View style={{flex:0.8}} />

</View>

You have mentioned using flex, but not working. I am not sure how exactly as if you are using it like above, size should be relative to screen size.

Using Dimensions

How about using the Dimensions module. It can be used to get the width and height of the window and you can set height based on that

import {
  Dimensions
} from 'react-native';
const winWidth = Dimensions.get('window').width;
const winHeight = Dimensions.get('window').height;


header = {
    height: winHeight * 0.2 // 20%
}

Then use width and height to set the height of the header (ex. percentage-based)

Im trying to set my header height so its responsive for tablets and smartphones. I've have tried using flex column:

const headerStyle = {
  paddingHorizontal: theme.metrics.mainPadding,
  paddingTop: 0,
  paddingBottom: 0,
  backgroundColor: theme.colors.blue,
  flex: 0.5,
  flexDirection: 'column',
};

However, the header looks ok on a tablet but too tall on a smartphone.

What is the best way to set dimensions for different devices?

EDIT:

I have this function:

export function em(value: number) {
  return unit * value;
}

And I am now using it in my stylesheet:

  headerHeight: em(6),
  headerImageWidth: em(3),
  headerImageHeight: em(3),
  headerLogoHeight: em(6),
  headerLogoWidth: em(20),

The image looks ok on tablet, but now on smartphone its too small. If i understand correctly, I need to use dimensions.width to set an appropriate unit value in my function?

Smartphone

Tablet

Im trying to set my header height so its responsive for tablets and smartphones. I've have tried using flex column:

const headerStyle = {
  paddingHorizontal: theme.metrics.mainPadding,
  paddingTop: 0,
  paddingBottom: 0,
  backgroundColor: theme.colors.blue,
  flex: 0.5,
  flexDirection: 'column',
};

However, the header looks ok on a tablet but too tall on a smartphone.

What is the best way to set dimensions for different devices?

EDIT:

I have this function:

export function em(value: number) {
  return unit * value;
}

And I am now using it in my stylesheet:

  headerHeight: em(6),
  headerImageWidth: em(3),
  headerImageHeight: em(3),
  headerLogoHeight: em(6),
  headerLogoWidth: em(20),

The image looks ok on tablet, but now on smartphone its too small. If i understand correctly, I need to use dimensions.width to set an appropriate unit value in my function?

Smartphone

Tablet

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Aug 2, 2017 at 15:09 Bomber asked Aug 2, 2017 at 13:34 BomberBomber 11k2727 gold badges9797 silver badges175175 bronze badges 1

• You will have to use the 'Dimensions' module from 'react-native' and modify your style at runtime. Responsive a la react-native. Here is a good read : medium./@elieslama/… – MaieonBrix Commented Aug 2, 2017 at 14:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I can think of two ways

Using flex

<View style={{flex:1}}>
  <View style={{flex:0.2}}>
     <Text>Header</Text>
  </View>

  <View style={{flex:0.8}} />

</View>

You have mentioned using flex, but not working. I am not sure how exactly as if you are using it like above, size should be relative to screen size.

Using Dimensions

How about using the Dimensions module. It can be used to get the width and height of the window and you can set height based on that

import {
  Dimensions
} from 'react-native';
const winWidth = Dimensions.get('window').width;
const winHeight = Dimensions.get('window').height;


header = {
    height: winHeight * 0.2 // 20%
}

Then use width and height to set the height of the header (ex. percentage-based)

本文标签： javascriptReact native responsive header heightStack Overflow