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

Question

当 NavigatorIOS 有一个全屏背景图像作为它的兄弟时，它似乎没有显示当前内容。

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

这里是示例代码:

https://rnplay.org/apps/wrntpQ

    '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 并未积极开展工作——它是一项“社区责任”，因为 Facebook 和其他核心贡献者基本上未使用它，并且社区也没有特别有兴趣插入它向前发展(很少有拉取请求)，因此围绕此构建您的应用程序是不安全的。