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

Posted 2023-02-23

【中文标题】组件不会在 NavigatorIOS 中呈现 - React Native

【英文标题】：Component won't render within 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);

【参考方案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',
/>