React NativeBase没有显示我导入的组件

React NativeBase not showing my imported components

本文关键字：导入 组件 显示 NativeBase React      更新时间：2023-09-26

我是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中的文本没有。

任何帮助都非常感谢!

NativeBase Container目前主要接受Header、Content和Footer。

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

谢谢你提醒我。

我的团队会把解决方案反馈给你。

所以我已经找到了问题…似乎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>标签…不太确定为什么这有很大的不同，但很高兴知道!

相关文章：