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;

没什么好时髦的。什么都没有呈现到页面，没有错误。应用程序加载，我看到＆＃34;欢迎！＆＃34;作为标题，但（Landing）组件没有显示。 我错过了什么吗？

如果我将Landing render中的所有内容移动到index.js render中，那就可以了。我误解了this link吗？

Answer 1

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

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

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

不了解NavigatorIOS React Naitive

1 个答案: