android - 在 ios 和 android 上 react native 完全相同的 header ？

Question

我正在开发一个reactnative项目，我必须在ios和android上制作两个具有完全相同顶栏的应用程序是否可以 ？即使它不是 native header 或者也许我必须自定义 android 顶部栏，以便看起来与 ios 相同？

提前致谢!马克西姆

Answer 1

尝试制作这样的自定义 header :

import React, {Fragment, Component} from 'react';
import {View, Text, TouchableOpacity, Image, SafeAreaView} from 'react-native';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import {headerStyles} from '../style/headerStyles';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          paddingBottom: hp('3.125%'),
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <View style={{opacity: 0}}>
          <Image source={require('../assets/images/crossIcon.png')} />
        </View>
        <View style={{flexShrink: 1}}>
          <Text style={headerStyles.headerText}>{this.props.title}</Text>
        </View>
        <View style={{left: -20, paddingLeft: 10, marginLeft: 10}}>
          <TouchableOpacity
            style={headerStyles.imageView}
            onPress={() => this.props.navigation.goBack()}>
            <Image
              style={{height: 15, width: 15}}
              source={require('../assets/images/crossIcon.png')}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

并禁用导航默认标题。

现在将此 header 导入到代码顶部的任何位置。这将是完全相同的。

希望对您有所帮助。如有疑问请放心