1

我对 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没有。

任何帮助深表感谢！

4

2 回答 2

3

NativeBase Container 目前主要接受Header,Content和Footer.

NativeBase Content 依次采用 React Native 的 Image、View 和 ScrollView，而不是任何其他自定义组件。

感谢您注意到这一点。

我的团队会尽快与您联系并提供解决方案。

于 2016-10-05T14:53:26.630 回答
2

所以我已经解决了这个问题...... React NativeBase 似乎不允许您将<Content>部分放在主要组件之外。像这样的工作：

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

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

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

于 2016-10-04T08:53:47.050 回答