Question

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

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

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

这是我的代码：

代码/ 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);

代码/ 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中的文字没有。

非常感谢任何帮助！

Answer 1

截至目前，

NativeBase容器主要接受Header，Content和Footer。

NativeBase Content反过来使用React Native的Image，View和ScrollView，而不是任何其他自定义组件。

感谢您注意这一点。

我的团队将通过解决方案回复您。

Answer 2

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

<强>代码/ index.ios.js

＆＃13;

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

＆＃13;

<强>代码/ main.js

＆＃13;

import React from 'react';
import { Text } from 'react-native';

export default class MainContent extends React.Component {
  render() {
    return (
      <Text>Oh hello there!</Text>
    );
  }
}

＆＃13;

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

React NativeBase不显示我导入的组件

2 个答案: