我设计使用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