javascript - 不了解 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 没有开箱即用的默认样式。所以基本上没有指定默认的宽度或高度。这意味着如果您不指定宽度和高度或弹性值，则它不会显示在您的 View 中。