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

我无法让这个简单的NavigatorIOS测试正常工作。控制台登录My View triggeres，如果我跳过NavigatorIOS组件，并直接渲染MyView，我可以获取它。但是，当MyView由NavigatorIOS组件中的组件触发时，它不会呈现“我的NavigatorIOS测试”以外的任何内容。组件不会在NavigatorIOS内呈现 - React Native

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);

来源

2015-03-31 mrborgen

将容器样式添加到NavigatorIOS，它需要是flex：1以正确显示子组件（我有同样的问题）。

来源

2015-03-31 11:55:32 deanmcpherson

我只是想说，但我只是得到一个白色的屏幕。导航头也不见了......你知道为什么吗？ – mrborgen 2015-03-31 12:01:39

谢谢。你甚至想过这样做？你有什么想法，为什么？ – 2015-07-01 17:52:56

React原生样式使用flexbox模型进行一些更改，flex：1属性仅告诉组件使用所有可用空间。在这种情况下它类似于说100％的高度。 – deanmcpherson 2015-07-07 04:47:59

我有同样的问题。原来，我不得不在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);

来源

2015-03-31 12:45:04 stp

MyView没有显示在导航中，只有导航显示 – sandy 2016-04-04 09:41:49

这是唯一帮助我的答案。 NavigatorIOS中的style.container非常重要。 – Boomerange 2016-10-06 10:17:29

我怎样才能得到正确的边缘？ – 2017-11-23 16:07:09

我也有类似的问题。添加以下到我的样式表：

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

然后再去NavigatorIOS组件wrapper风格。这解决了这个问题。

来源

2015-03-31 14:14:37

谢谢。这工作。 – 2015-04-26 20:09:46

@mrborgen这将是一个不错的答案。你不会继续并且标记这个吗？ – Jack 2015-07-14 20:36:13

Wohaa工作。为什么它没有在文档中提到... – varun 2016-02-01 06:31:31

我碰到了同样的问题，我的错误是在款式：

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

我不得不从那里取出justifyContent和alignItems。问题解决了我。

来源

2015-04-07 14:27:33 ilansas

这对我来说很有效，看起来你是在关注egghead.io上的反应原生教程：P – Jayem 2016-09-10 13:42:44

我有一个类似的问题（愚蠢），因为我给了NavigatorIOS一个背景颜色，这意味着它由于某种原因掩盖了它内部的实际组件。

来源

2015-04-09 02:52:04 koriner

No ...背景应该指的是组件的背后。我认为你很好。在本机iOS中，导航器甚至没有视图。 – 2015-07-01 17:56:19

我在使用Navigator时遇到了类似的问题，而且没有任何帮助。所以我用this.forceUpdate（）;强制更新按钮按下功能

来源

2015-12-01 06:55:56 passol

我遇到同样的问题。对我而言，这是风格问题。我为NavigatorIOS创建并使用新的样式属性containerNV。这解决了我的问题。

var styles = StyleSheet.create({ 
    containerNV: { 
    flex: 1, 
    backgroundColor: '#05FCFF', 
    } 
});

来源

2016-06-16 13:38:15 singkeam86

有同样的问题。我的主屏幕内没有渲染。 2小时后，我决定删除我用导航仪包装的<View>元素，并突然发现一切正常。

概括地说，我从这个去：

<View> 
    <NavigatorIOS 
    style={styles.container} 
    initialRoute={{ 
     component: MainPage, 
     title: 'MainPage', 
    }}/> 
</View>

这个

<NavigatorIOS 
    style={styles.container} 
    initialRoute={{ 
    component: MainPage, 
    title: 'MainPage', 
}}/>

来源

2017-05-07 22:05:29

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

回答

相关问题