2

我使用反应原生元素制作了一个标题，我想在其中添加背景图像。有什么办法吗？

我正在使用 react-native-elements: "^0.19.1"

这是我的标题代码

 render() {
    return (
        <View style={{ paddingTop: Constants.statusBarHeight, backgroundColor: color.light_grey }}>
                <Header
                    leftComponent={this.props.left ? this.props.left : <IconWrapper name='menu' color='black' size={28} style={styles.icon} onPress={() => Actions.drawerOpen()} />}
                    centerComponent={<Text style={styles.headerText}>{this.props.title}</Text>}
                    rightComponent={this.props.right ? this.props.right : <IconWrapper name='handbag' type='simple-line-icon' color='black' size={28} style={styles.icon} onPress={() => Actions.BagContents()} />}
                    outerContainerStyles={[styles.headerOuterContainer, { height: 0.08 * windowHeight() }]}
                />                

        </View>
    ) 
}

}

4

4 回答 4

2

您始终可以创建自己的<Header/>组件，可能会花费您更多时间，但您将能够理解它并根据需要对其进行编辑。我创建了一个简单的 Header 组件来向您展示如何将背景图像添加到您的标题中。见小吃@abranhe/stackoverflow-56729412

页眉.js

import React, { Component } from 'react';
import { View, TouchableOpacity, StyleSheet, Dimensions, ImageBackground } from 'react-native';

export default class Header extends Component {
  renderContent() {
    return (
      <View style={styles.content}>
        <View style={styles.left}>{this.props.left}</View>
        <View style={styles.center}>{this.props.center}</View>
        <View style={styles.right}>{this.props.right}</View>
      </View>
    );
  }

  renderHeaderWithImage() {
    return (
      <ImageBackground style={styles.container} source={this.props.imageSource}>
        {this.renderContent()}
      </ImageBackground>
    );
  }

  renderHeaderWithoutImage() {
    return (
      <View style={[{ backgroundColor: '#f8f8f8' }, styles.container]}>
        {this.renderContent()}
      </View>
    );
  }

  render() {
    return this.props.image
      ? this.renderHeaderWithImage()
      : this.renderHeaderWithoutImage();
  }
}

const styles = StyleSheet.create({
  container: {
    top: 0,
    position: 'absolute',
    width: Dimensions.get('window').width,
    backgroundColor: '#f8f8f8',
    borderBottom: 1,
    borderColor: '#f8f8f8',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
  },
  content: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: Dimensions.get('window').height * 0.03,
    height: Dimensions.get('window').height * 0.045,
  },
  left: {
    marginHorizontal: 5,
  },
  center: {
    marginHorizontal: 5,
  },
  right: {
    marginHorizontal: 5,
  },
});

然后当你想使用Header组件时，你可以将imageprop 设置为true，例如：

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import Header from './components/Header';

export default () => {
  return (
    <View>
      <Header
        image
        imageSource={{ uri: 'https://yourimage.png' }}
        left={<Ionicons name="md-arrow-round-back" size={25} />}
        center={<Text>Projects</Text>}
        right={<Ionicons name="ios-camera" size={25} />}
      />
    </View>
  );
};

然后，如果您将image道具设置为，false您将从背景中删除图像。

<Header
  image={false}
  imageSource={{ uri: 'https://yourimage.png' }}
  left={<Ionicons name="md-arrow-round-back" size={25} />}
  center={<Text>Projects</Text>}
  right={<Ionicons name="ios-camera" size={25} />}
/>

于 2019-06-24T05:44:17.307 回答
0

假设您正在使用react-navigation

你需要在navigationOptions中添加一个custon header组件，


import { Header } from 'react-navigation';


    static navigationOptions = ({ navigation }) => {
        return {
            header: (props) => <View >
                <LinearGradient
                    style={{ height: '100%', width: '100%', position: 'absolute' }}
                    start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} colors={['#1A9EAE', '#4EAE7C']}
                />
                <Header {...props} style={{ backgroundColor: Colors.transparent }} />
            </View>,
        }
    }
于 2019-06-24T04:33:18.507 回答
0

有 ReactNative 的组件ImageBackground你可以使用它。

像这样，

<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Header
        leftComponent={this.props.left ? this.props.left : <IconWrapper name='menu' color='black' size={28} style={styles.icon} onPress={() => Actions.drawerOpen()} />}
        centerComponent={<Text style={styles.headerText}>{this.props.title}</Text>}
        rightComponent={this.props.right ? this.props.right : <IconWrapper name='handbag' type='simple-line-icon' color='black' size={28} style={styles.icon} onPress={() => Actions.BagContents()} />}
        outerContainerStyles={[styles.headerOuterContainer, { height: 0.08 * windowHeight() }]}
     /> 
</ImageBackground>

您可以随时按照自己的方式设计。

于 2019-06-24T03:40:32.457 回答
0

现在回答这个问题已经很晚了，但无论如何，这对我有用。

<Header
        backgroundImage={require("../../assets/images/btn-header-background.png")}
        centerComponent={{
          text: i18n.t("stats.title"),
          style: { fontFamily: "FunctionLH", fontSize: 30, color: "#fff" }
        }}
        containerStyle={{
          backgroundColor: "transparent",
          justifyContent: "space-around"
        }}
        statusBarProps={{ barStyle: "light-content" }}
      />
于 2020-02-04T07:41:30.540 回答