Question: How can I design a header which is applicable for all devices in react-native

问题

I need to design a header like below-attached image. Can I able to design this using react-native elements or material-ui.

Here the profile name may be the lengthiest name or short name. But needs to work and start from that place.

Can anyone suggest a good solution?

Note: I have used react-native-elements (Header) but it not worked for me as expected

回答1:

You can design completely custom Header with React navigation. By setting header height in navigationOptions

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import {
  View,
  TouchableOpacity,
  Text,
  Image
} from 'react-native';
import { Icon } from 'react-native-elements';

const commonHeader = (navigation) => ({
  headerLeft: null,
  headerRight: null,
  headerStyle: { 
    backgroundColor: '#4DBCD7',
    height: 180,
  },
  headerTitle: (
    <View style={{ width: '100%', height: '100%' }}>
      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15 }}>
        <View style={{ justifyContent: 'center' }}>
            {/* upper left portion with back icon */}
        </View>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            {/* upper right portion with other icons */}
        </View>
      </View>
      <View style={{ flex: 2, alignItems: 'flex-start', justifyContent: 'space-around', paddingHorizontal: 50, paddingVertical: 10 }}>
          {/* lower portion with image & username */}
      </View>
    </View>
  )
});

export default createStackNavigator({ 
  Home: {
    screen: HomeScreen,
    navigationOptions:  ({ navigation }) => commonHeader(navigation)
  }
});

Then, you can use this commonHeader anywhere you want...

---

EDIT (For dynamic header content)

To set header content dynamically, you can make a separate Header component and then set your dynamic content using props

Header.js

...
export default Header = props => {
  const { left, right, children } = props;

  return (
    <View style={{ width: '100%', height: '100%' }}>
      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15 }}>
        {left}

        {right}
      </View>
      <View style={{ flex: 2, paddingHorizontal: 50, paddingVertical: 10 }}>
        {children}
      </View>
    </View>
  );
}

Then in your StackNavigator

export default createStackNavigator({ 
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerLeft: null,
      headerRight: null,
      headerStyle: { 
        backgroundColor: '#4DBCD7',
        height: 180,
      }
    }
  }
});

Then set your dynamic content in respective screen. e.g. HomeScreen

...
import Header from 'Header';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: (
      <Header navigation={navigation}
      left={
         /* left content (back icon) */
      }
      right={
         /* right (other icons) */
      }>
          {/* main content (image, text, etc.) */}
      </Header>
    )
  }

  ...
}

This is the final result. Hope it'll help you as well!

来源：https://stackoverflow.com/questions/58705254/question-how-can-i-design-a-header-which-is-applicable-for-all-devices-in-react