不了解 Navigator IOS React Native

Question

所以我的应用程序非常基本：

import React, { Component } from 'react';
import Landing from './App/pages/landing.js';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  NavigatorIOS
} from 'react-native';

class twitterQue extends Component {

  _enter() {
    console.log('Hey Girl');
  }

  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: Landing,
          title: 'Welcome!',
          passProps: {},
        }}
      />
    );
  }
}

AppRegistry.registerComponent('twitterQue', () => twitterQue);

然后我有一个登陆组件：

import React, { Component } from 'react';
import Button from '../components/button/buttons.js';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

class Landing extends Component {

  _enter() {
    console.log('Hey Girl');
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Twitter Que
        </Text>
        <Button type={"primary"} buttonWidth={240} onPress={() => this._enter()}>Que Up Some Tweets!</Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('Landing', () => Landing);

module.exports = Landing;

没有什么时髦的。页面上没有任何内容，也没有错误。应用程序加载，我看到“欢迎！”作为标题，但 (Landing) 组件未显示。 我错过了什么吗？

如果我将所有东西从 Landing render 移到 index.js render 中，它就可以工作。我是不是误解了docs？

Answer 1

尝试将style={{flex:1}} 添加到 NavigatorIOS：

<NavigatorIOS
    style={{flex:1}}
    initialRoute={{
      component: Landing,
      title: 'Welcome!',
      passProps: {},
    }}
  />

NavigatorIOS 没有开箱即用的默认样式。所以基本上没有指定默认宽度或高度。这意味着，如果您不指定宽度和高度或 flex 值，则它不会显示在您的视图中。