问题:如何设计适用于react-native的所有设备的标头 [英] Question: How can I design a header which is applicable for all devices in react-native

问题描述

我需要设计一个如下图所示的标题.我可以使用react-native元素或material-ui设计这个吗?

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?

注意:我已经使用了react-native-elements(标题)，但是它对我来说并不像预期的那样

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

推荐答案

您可以使用React导航设计完全自定义的Header.通过在navigationOptions

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

然后，您可以在任意位置使用此commonHeader ...

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

编辑 (用于动态标题内容)

EDIT (For dynamic header content)

要动态设置标题内容，可以制作一个单独的Header组件，然后使用props

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

然后在您的 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!

这篇关于问题:如何设计适用于react-native的所有设备的标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！