Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

javascript - React NativeBase not showing my imported components

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.

Here is my code:

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

I'm running this using:

rnpm link
react-native run-ios

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.

Any help is much appreciated!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

NativeBase Container as of now mainly accepts Header, Content and Footer.

NativeBase Content in-turn takes Image, View and ScrollView of React Native and not any other custom components.

Thank you for bringing this into notice.

My team will get back to you with the solution.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...