Native Base React中的内容组件未呈现

时间:2017-12-04 00:31:47

标签: javascript android react-native native-base

我设计使用Native base对本机UI做出反应  库(http://docs.nativebase.io/Components.html#anatomy-headref)。我正在关注他们最基本的例子(骨架),但内容组件根本没有出现。鉴于大多数子组件都依赖于此,我被困在这个库上。我可以渲染网格,这使得这个问题对我来说更加奇怪。我在他们的文档中使用基线示例给出了 http://docs.nativebase.io/Components.html#anatomy-headref,只有标题呈现。

 import {Container,Header, Title, Button, Icon,Text} from 'native-base'; 
 //Include Nativebase required components
 import React from 'react';
  import {  StatusBar, StyleSheet ,View} from 'react-native'; //Most of the 
   react native components can be found in NativeBase
  import { Font } from 'expo'; //to include font from expo.

   // load up the child components 
  import BodyComponent from './body_container';


  export default class ContainerApp extends React.Component {
  //checking state for if font is loaded or not.
  state = {
   fontLoaded: false,
 };

 async componentDidMount() {
    await Font.loadAsync({
     'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  });
     //Setting the state to true when font is loaded.
     this.setState({ fontLoaded: true });
   }



  render() {
      return (

      this.state.fontLoaded && (
        <BodyComponent /> 
      )

    );
   }
 }

身体成分

        export default class BodyComponent extends React.Component {
            constructor(props){
                super(props);

            }
            render(){
                return(
                <Container>
                    <Header>
                    <Left>
                        <Button transparent>
                        <Icon name='menu' />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Header</Title>
                    </Body>
                    <Right />
                    </Header>   


                    <Content>
                        <Text>
                            This is Content Section
                        </Text>
                    </Content>

                </Container>

                )

            }
        }
ui出现像(Pixel XL android) The UI

我创建了回购https://github.com/abdullah2891/react_native_practice

0 个答案:

没有答案