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

【问题标题】：Component won't render within NavigatorIOS - React Native组件不会在 NavigatorIOS 中呈现 - React Native
【发布时间】：2015-03-31 11:10:29
【问题描述】：

我无法让这个简单的 NavigatorIOS 测试工作。控制台登录 My View 触发器，如果我跳过 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);

【问题讨论】：

标签： ios reactjs native

【解决方案1】：

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

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

然后将NavigatorIOS 组件赋予wrapper 样式。这解决了问题。

【讨论】：

@mrborgen 这将是一个不错的答案。你不继续标记这个吗？
'wrapper' 没有什么神奇之处。实际上，样本将 style = {{flex: 1}} 传递给 NavigatorIOS JSX。不过肯定很微妙。最好把它称为强制性的。

【解决方案2】：

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

【讨论】：

我刚试过，但我只是得到一个白屏。 Navigator 标头也不见了……你知道为什么吗？
谢谢。你是怎么想到这样做的？你知道为什么吗？
React 原生样式使用 flexbox 模型进行了一些更改， flex: 1 属性只是告诉组件使用所有可用空间。它类似于在这种情况下说 100% 高度。

【解决方案3】：

我遇到了同样的问题，我的错误在于样式：

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

我不得不从那里删除justifyContent 和alignItems。为我解决了问题。

【讨论】：

这对我有用，看起来你正在关注 egghead.io 上的 react-native 教程：P

【解决方案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);

【讨论】：

MyView 没有显示在导航中，只有导航显示
这是唯一对我有帮助的答案。重要的是 NavigatorIOS 中的 style.container。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我也（愚蠢地）遇到了类似的问题，因为我给 NavigatorIOS 设置了背景色，这意味着它出于某种原因掩盖了其中的实际组件。

【讨论】：

否...背景应该是在组件后面。我觉得你很好。在原生 iOS 中，导航器甚至没有视图。

【解决方案7】：

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

【讨论】：

【解决方案8】：

有同样的问题。我的主屏幕内没有渲染任何内容。 2 小时后，我决定删除包裹导航器的 <View> 元素，突然一切正常。

简而言之，我的出发点是：

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

到这里

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

【讨论】：