グラディエントイメージオーバーレイ付きヘッダー

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 />以下です。 <BgImg><App /></BgImg>：ここ

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の内側に私のルート要素を置くことによって、それを解決した方法です。

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

}