带有渐变图像叠加的标题

Question

我正在尝试将带有渐变图像叠加层的标题添加到我正在制作的应用程序中。 以下代码已被删减和简化，希望对您有意义。

标题应在所有屏幕上可见，其中一些屏幕显示后退按钮，只有前屏幕显示右侧的徽标和设置。

我该如何解决？

import { TabNavigator, StackNavigator } from 'react-navigation';
import React, { Component } from 'react';

import Example from '../components/example';

const navContainer = (Comp, options) => {
  return StackNavigator({
    Main: {
      screen: Comp,
      navigationOptions: options
    },
    S1: {
      screen: Example
    },
    S2: {
      screen: Example,
      navigationOptions: ({ navigation }) => {
        return {
          headerTitle: <Example {...navigation.state.params} />,
          headerStyle: {
            backgroundColor: 'white'
          }
        }
      }
    },
    S3: {
      screen: Example,
      navigationOptions: ({ navigation }) => {
        return {
          headerTitle: <Example {...navigation.state.params} />,
          headerStyle: {
            backgroundColor: 'white'
          }
        }
      }
    },
    S4: {
      screen: Example,
      navigationOptions: ({ navigation }) => {
        return {
          headerTitle: <Example {...navigation.state.params} />,
          headerStyle: {
            backgroundColor: 'white'
          }
        }
      }
    }
  },
  {
    cardStyle: {
      backgroundColor: 'green'
    }
  })
}

const navOptions = title => {
  return {
    headerTitle: title,
    headerBackTitle: null,
    headerStyle: {
      backgroundColor: 'transparent'
    }
  }
}

const NavTab = TabNavigator(
  {
    M1: {
      screen: navContainer(Example, navigation => ({
        headerTitle: <Example />,
        headerRight: <Example { ...navigation } />,
        headerStyle: {
          backgroundColor: 'transparent'
        }
      }))
    },
    M2: {
      screen: navContainer(Example, navOptions('M2'))
    },
    M3: {
      screen: navContainer(Example, navOptions('M3'))
    },
    M4: {
      screen: navContainer(Example, navOptions('M4'))
    }
  },
  {
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {
      inactiveBackgroundColor: 'white',
      activeBackgroundColor: 'white'
    }
  }
);

export default NavTab;

示例组件：

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class Example extends Component {

  static style = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }
  })

  render () {
    return (
      <View style={ Example.style.container }>
        <Text>hello</Text>
      </View>
    );
  }

}

Answer 1

我的第一次尝试是覆盖Header._renderHeader，但仍然没有覆盖状态栏。 最终解决方案在<hr />下方。

import React from 'react';
import { Header } from 'react-navigation';
import { StyleSheet, View, StatusBar, Image } from 'react-native';

import img_gradient from '../images/headerbg.png';

const style = StyleSheet.create({
  header: {
    flexDirection: 'row'
  },
  img: {
    width: '100%',
    height: '100%',
    resizeMode: 'stretch'
  }
});

export default class NavHeader extends Header {

  _renderHeader (props) {
    const left = this._renderLeft(props);
    const right = this._renderRight(props);
    const title = this._renderTitle(props, {
      hasLeftComponent: left !== null,
      hasRightComponent: right !== null
    });
    return (
      <View key={ `scene_${ props.scene.key }` } style={ [StyleSheet.absoluteFill, style.header] }>
        <StatusBar barStyle="light-content" />
        <Image source={ img_gradient } style={ style.img }>
          { title }
          { left }
          { right }
        </Image>
      </View>
    );
  }

}

---

我通过将根元素放入 BgImg 中来解决它：<BgImg><App /></BgImg>。

import React, { Component } from 'react';
import { StyleSheet, Image, StatusBar } from 'react-native';

import img_gradient from '../images/headerbg.png';

export default class BgImg extends Component {

  static style = StyleSheet.create({
    img: {
      width: '100%',
      height: '100%',
      resizeMode: 'stretch'
    }
  })

  render () {
    return (
      <Image source={ img_gradient } style={ BgImg.style.img }>
        <StatusBar barStyle="light-content" />
        { this.props.children }
      </Image>
    );
  }

}