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

本文是小编为大家收集整理的关于如何在React-Native中设置导航仪的背景图片的处理方法,想解了如何在React-Native中设置导航仪的背景图片的问题怎么解决?如何在React-Native中设置导航仪的背景图片问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

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

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

现在我需要为所有场景设置一个固定的背景图像,但我无法将 Navigator 组件包装在另一个 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,我可以看到红色背景,但它不适用于图像.

有什么建议吗?

推荐答案

找到解决方法:要显示背景图像,您必须将 navigatorContainer 的 backgroundColor 设置为"透明".

本文地址:https://www.itbaoku.cn/post/924408.html