React-Native NavigatorIOS 错误不适用于背景图像

Question

NavigatorIOS 似乎在有全屏背景图像作为其兄弟时未显示当前内容。

能否请您告诉我是否有解决方法，我不想将背景图片移动到我的每个组件页面中。

这里是示例代码：

    'use strict';

    var React = require('react-native');
    var {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image,
        NavigatorIOS
        } = React;

    var SampleComponent = React.createClass({
        render: function() {
            return (
                <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'transparent'
          }}>
                    <Text style={{color: 'red'}}>Hello</Text>
                </View>
            );
        }
    });

    AppRegistry.registerComponent('SampleComponent', () => SampleComponent);

    var SampleApp = React.createClass({
        render: function() {
            return (
                <View style={styles.container}>
                    <View style={styles.bgContainer}>
                        <Image
                            style={styles.logo}
                            source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/>
                    </View>
                    <NavigatorIOS
                        style={styles.navigator}
                        initialRoute={{
                      component: SampleComponent,
                      title: 'My View Title'
                            }} />
                </View>
            );
        }
    });

    /*
     // It works if you put the following line in line 39
     <SampleComponent style={styles.navigator} />

     // But it doesn't work when you put the following lines in 39
     <NavigatorIOS
     style={styles.navigator}
     initialRoute={{
     component: SampleComponent,
     title: 'My View Title'
     }} />
     */

    var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        bgContainer: {
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        },
        logo: {
            flex: 1,
            // remove width and height to override fixed static size
            width: null,
            height: null,
            // make the background transparent so you actually see the image
            backgroundColor: 'transparent'
        },
        navigator: {
            flex: 1,
            backgroundColor: 'transparent'
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
        instructions: {
            textAlign: 'center',
            color: '#333333',
            marginBottom: 5,
        },
    });

    AppRegistry.registerComponent('SampleApp', () => SampleApp);

    module.exports = SampleApp;

Answer 1

有人告诉我目前不支持此功能。

他们强烈建议您使用 Navigator 而不是 NavigatorIOS（请参阅 comparison docs here 这样您就不会遇到此问题。 NavigatorIOS 没有被积极地开发——它是一个 "Community Responsibility" 因为它基本上没有被 Facebook 和其他核心贡献者使用，并且社区也没有特别有兴趣推动它向前发展（很少有拉取请求），因此围绕此构建您的应用程序是不安全的。

React-Native NavigatorIOS 错误不适用于背景图像

React-Native NavigatorIOS bug not working with background image

background-image

navigator

ios

reactjs

react-native