组件不会在NavigatorIOS中呈现 - React Native

Question

我无法让这个简单的NavigatorIOS测试工作.控制台登录My View triggeres,如果我跳过NavigatorIOS组件并直接渲染MyView,我可以进行渲染.但是,当从NavigatorIOS组件中的组件触发MyView时,除了"我的NavigatorIOS测试"之外,它不会呈现任何其他内容.

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


 var navigation = React.createClass ({
  render: function() {
    return (
      <NavigatorIOS
            initialRoute={{
              component: MyView,
              title: 'My NavigatorIOS test',
              passProps: { myProp: 'foo' },
      }}/>
    );
  },
});


var MyView = React.createClass({
  render: function(){
    console.log('My View render triggered');
    return (
        <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello there, welcome to My View
        </Text>
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});


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

Answer 1

我遇到了类似的问题.我在样式表中添加了以下内容:

...
wrapper: {
  flex: 1,
}...

然后给了NavigatorIOS组件wrapper风格.这解决了这个问题.

Answer 2

将容器样式添加到NavigatorIOS,它需要是flex:1才能正确显示子组件(我遇到了同样的问题).

Answer 3

我遇到了同样的问题,我的错误是风格:

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

我不得不删除justifyContent,并alignItems从那里.问题解决了我.

Answer 4

我遇到过同样的问题.原来我必须在MyView组件内部的视图顶部添加一些边距.

试试这个:

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


 var navigation = React.createClass ({
  render: function() {
    return (
      <NavigatorIOS
            style={styles.container}
            initialRoute={{
              component: MyView,
              title: 'My NavigatorIOS test',
              passProps: { myProp: 'foo' },
      }}/>
    );
  },
});


var MyView = React.createClass({
  render: function(){
    console.log('My View render triggered');
    return (
        <View style={styles.wrapper}>
        <Text style={styles.welcome}>
          Hello there, welcome to My View
        </Text>
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  wrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 80
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});


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