如何在React-Native中设置导航器的背景图像 [英] How to set a background Image of Navigator in React-Native

问题描述

我在React-Native中使用Navigator组件。

I'm using Navigator component in React-Native.

//...
render() {
    return (
        <Navigator
            ref="navigator"
            navigationBar={this.renderHeader()}
            sceneStyle={styles.container}
            initialRoute={{type: 'Home'}}
            renderScene={this.renderScene.bind(this)} />
    );
}

现在我需要为所有场景设置固定的背景图像，但我可以将Navigator组件包装在另一个View中。

Now I need to set a background image fixed for all scenes, but I can't wrap Navigator component inside another View.

// No errors but background is ignored
render() {
    return (
        <View style={styles.navigatorContainer}>
            <Image source={require('image!logo-big')} style={styles.background} />  
            <Navigator
                ref="navigator"
                navigationBar={this.renderHeader()}
                sceneStyle={styles.container}
                initialRoute={{type: 'Home'}}
                renderScene={this.renderScene.bind(this)} />
        </View>
    );
}

var styles = StyleSheet.create({
    container: {
        flex: 1
    },
    background: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: 1024,
        height: 768
    },
    navigatorContainer: {
        flex: 1,
        backgroundColor: '#FF0000'
    }
});

如果我将backgroundColor设置为类NavigatorContainer，我可以看到红色背景，但它不能用于图片。

If I set the backgroundColor to class NavigatorContainer, I can see red background but it doesn't work with image.

有任何建议吗？

推荐答案

找到修复：到显示背景图像，你必须将navigatorContainer的backgroundColor设置为'transparent'。

Found the fix: to show the background image you must set the navigatorContainer's backgroundColor to 'transparent'.

这篇关于如何在React-Native中设置导航器的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！