Question

我目前正在尝试学习反应原生并在教程后遇到问题。我按照Ray Wenderlich网站上的PropertyFinder教程进行了操作，结果很好。

现在离开我自己开始一些事情，我似乎无法得到一个要渲染的页面 - 而且我一直遇到同样的异常，这可能导致页面无法呈现（但我＆＃39;我不完全确定。）

这是主应用页面，它只是导航器：

'use strict';

var React = require('react-native');
var WelcomePage = require('./WelcomePage');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var MyApp = React.createClass({
  render: function() {
    return (
      <React.NavigatorIOS style={styles.container} 
          initialRoute={{
          title: 'Welcome',
          component: WelcomePage
        }}/>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

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

这是欢迎页面：

'use strict';

var React = require('react-native');

var {
    StyleSheet,
    Text,
    View,
    Component
} = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    textTitle: {
        color: 'black',
        fontSize: 35,
        textAlign: 'center'
    },
    textSubs: {
        color: 'black',
        fontSize: 25,
        textAlign: 'center'
    }
});

class WelcomePage extends Component {
    render() {
        console.log('About to render welcome page');
        return (
            <View style={styles.container}>
                <Text style={styles.textTitle}>
                    Welcome to MyApp!
                </Text>
                <Text style={styles.textSubs}>
                    Good Choice for an App
                </Text>
                <Text style={styles.textSubs}>
                    Going to start with setting up the App
                </Text>
                <Text style={styles.textSubs}>
                    Are you ready?
                </Text>
            </View>
        );
    }
}

module.exports = WelcomePage;

现在，控制台日志记录正确显示＆＃39;关于渲染欢迎页面＆＃39;但是我得到的结果只是一个空白的白色窗口。如果我使用chrome调试器，如果选择Pause on Exceptions，我会收到异常。它暂停的代码片段是：

/**
 * Given a constructor can we call it without `new`?
 *
 * @param {function} Collection
 */
function isCallableWithoutNew(Collection) {
  try {
    Collection();  // <<<--- Here's where the exception seems to happen
  } catch (e) {
    return false;
  }
  return true;
}

如果我回到教程项目，它可以正常工作。我能看到的唯一区别是，当我初始化教程项目时，我引入的动画库没有实验＆＃39;版本（RCTAnimation），但是我试图从上面开始的新项目，如果我希望它工作，我必须使用实验版本。实际上，我只是在早期进行了测试，并且不再进行测试（我还不需要它）。

我也尝试过玩一下这些风格，但得到相同的结果 - 并发生同样的异常。

异常堆栈chrome显示是：

"TypeError: Constructor Map requires 'new'
    at Map (native)
    at isCallableWithoutNew (http://localhost:8081/index.ios.bundle:15407:5)
    at shouldPolyfillES6Collection (http://localhost:8081/index.ios.bundle:15378:5)
    at http://localhost:8081/index.ios.bundle:14500:8
    at http://localhost:8081/index.ios.bundle:15095:3
    at require (http://localhost:8081/index.ios.bundle:245:25)
    at http://localhost:8081/index.ios.bundle:14288:11
    at require (http://localhost:8081/index.ios.bundle:245:25)
    at http://localhost:8081/index.ios.bundle:14131:11
    at require (http://localhost:8081/index.ios.bundle:245:25)"

我想说这看起来像API版本问题？

我错过了一些明显的东西吗？

感谢您的帮助。

Answer 1

所以这最终成了我在'index.ios.js＆＃39;＆＃39;页。

我改变了这个：

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

对此：

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

然后呈现视图。我想我需要花一些时间来弄清楚这些样式如何布局组件......

如果有人知道为什么主NavigatorIOS窗格会将内容推到右边太远而无法显示（这就是发生的事情）如果样式设置为原来的样式，请告诉我。

匪徒是：＆＃39; justifyContent＆＃39; ＆＃39; alignItems＆＃39;

＆＃39;的backgroundColor＆＃39;当然对视图渲染没有影响（我没有将其添加回来，但可以没有问题）。

奇怪的反应原生问题与渲染

1 个答案: