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

}

带有渐变图像叠加的标题

1 个答案: