组件不会在NavigatorIOS – React Native内渲染
我无法得到这个简单的NavigatorIOStesting工作。 控制台login我的视图triggeres，我可以得到它，如果我跳过NavigatorIOS组件，并直接呈现MyView呈现。 但是，当从NavigatorIOS组件中的组件触发MyView时，它将不会呈现“我的导航器IOStesting”以外的任何内容。
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); 我有一个类似的问题。 我在样式表中添加了以下内容：
... wrapper: { flex: 1, }...
然后给了NavigatorIOS组件wrapper风格。 这解决了这个问题。
将容器样式添加到NavigatorIOS，它需要是flex：1以正确显示子组件（我有同样的问题）。
我遇到了同样的问题，我的错误是风格：
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', } });
我必须从那里删除justifyContent和alignItems 。 问题解决了我。
我遇到过同样的问题。 原来，我不得不在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);
我有一个类似的问题（愚蠢），因为我给了NavigatorIOS一个背景颜色，这意味着它由于某种原因掩盖了其中的实际组件。
当我使用Navigator的时候，我遇到了类似的问题，没有任何帮助。 所以我使用this.forceUpdate（）; 强制更新button按下function
我遇到同样的问题。 对我来说，这是风格问题。 我为NavigatorIOS创build并使用了一个新的样式属性containerNV。 这解决了我的问题。
var styles = StyleSheet.create({ containerNV: { flex: 1, backgroundColor: '#05FCFF', } });
有同样的问题。 我的主屏幕里没有渲染。 2小时后，我决定删除<View>元素，我正在用我的导航包装，突然一切正常。
简而言之，我从这个angular度出发：
<View> <NavigatorIOS style={styles.container} initialRoute={{ component: MainPage, title: 'MainPage', }}/> </View>
对此
<NavigatorIOS style={styles.container} initialRoute={{ component: MainPage, title: 'MainPage', }}/>
