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

Answer 5

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

Answer 6

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

Answer 7

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

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

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

7 个答案: