React NativeBase不显示我导入的组件 [英] React NativeBase not showing my imported components

问题描述

我是React和React Native的新手，我正在使用React NativeBase。

I'm fairly new to React and React Native and I'm having a play with React NativeBase.

我设法在单个文件中运行以下工作，但现在我只是尝试将我的代码拆分为单独文件中的多个组件。

I've managed to get the following working within a single file, but now I'm simply trying to split up my code into multiple components in separate files.

问题是，我导入的组件没有显示。我现在已经挣扎了一段时间，我看不出我做错了什么......可能是一些非常愚蠢的事情。

The problem is, my imported component does not show. I've struggled with this for a while now and I can't see what I'm doing wrong... probably something really stupid.

这是我的代码：

code / index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  Container,
  Title,
  Header,
} from 'native-base';
import MainContent from './main';

class AwesomeNativeBase extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>My awesome app</Title>
        </Header>
        <MainContent />
      </Container>
    );
  }
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

code / main.js

import React from 'react';
import { Text } from 'react-native';
import { Content } from 'native-base';

export default class MainContent extends React.Component {
  render() {
    return (
      <Content>
        <Text>Oh hello there!</Text>
      </Content>
    );
  }
}

我使用以下方式运行：

rnpm link
react-native run-ios

所以只是为了澄清， index.ios.js 中的代码显示正常，并且标题显示在iPhone模拟器中，但是， main.js 中的文字没有。

So just to clarify, the code in index.ios.js shows fine and the header is displayed in the iPhone simulator, however, the text in main.js does not.

非常感谢任何帮助！

推荐答案

所以我发现了问题...
似乎React NativeBase不允许你拥有< Content> 主要组件之外的部分。这样的东西有效：

So I've figured out the issue... It seems like React NativeBase does not allow you to have the <Content> section outside of the main component. Something like this works:

code / index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  Container,
  Title,
  Header,
  Content,
} from 'native-base';
import MainContent from './main';

class AwesomeNativeBase extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>My awesome app</Title>
        </Header>
        <Content>
          <MainContent />
        </Content>
      </Container>
    );
  }
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

code / main.js

import React from 'react';
import { Text } from 'react-native';

export default class MainContent extends React.Component {
  render() {
    return (
      <Text>Oh hello there!</Text>
    );
  }
}

所以现在如果你注意到，我只有<我的 main.js 中的code>< Text> 标签，而不是< Content> 标签......不太确定为什么这会产生巨大的差异但是很高兴知道！

So now if you notice, I have just the <Text> tags in my main.js and not the <Content> tags... Not too sure why this makes a huge difference but it's good to know!

这篇关于React NativeBase不显示我导入的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！