带有渐变图像叠加的标题

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