内容基于本机不可见
[英]Content not visible native-base
问题描述
I have simple anatomy with header, content and footer inside container, But only header is visible and nothing visible in content (with header and content only) 
我在容器内具有标头，内容和页脚的简单解剖，但是仅标头可见，内容中不可见（仅标头和内容）
<Header>....</Header>
<Content><Text>Some content</Text></Content>
But, if I place all ie. 但是，如果我全部放置。 header, content and footer. 页眉，内容和页脚。 Then footer replaces header and only footer is visible. 然后页脚替换页眉，只有页脚可见。 Content is not at all visible in any case. 内容在任何情况下都不可见。 native-base -v 2.3.1 本机基础-v 2.3.1
3 个解决方案
解决方案1
1 2019-07-15 16:07:50
I was able to reproduce this anytime there is a parent component in the hierarchy that does not have flex: 1 that Noah Allen listed in his answer. 每当层次结构中的某个父组件没有flex: 1 ，我都可以重现此内容flex: 1 Noah Allen在他的答案中列出了它。 Be sure to look up the entire component hierarchy to ensure there are no <View> 's being used as un-styled wrappers. 确保查找整个组件层次结构，以确保没有<View>用作未样式包装器。
The easiest way to reproduce this error is to wrap all the content in an unstyled <View> component: 重现此错误的最简单方法是将所有内容包装在无样式的<View>组件中：
<View>
<Container>
<Header />
<Content>
<Text>
This text does not show when Container is wrapped in a "View"
</Text>
</Content>
</Container>
</View>
See a demonstration here: https://snack.expo.io/@asametrical/native-base-content-empty 在此处查看演示： https : //snack.expo.io/@asametrical/native-base-content-empty
Removing the <View> component makes the text render inside <Content> . 删除<View>组件可使文本在<Content>内部呈现。 Applying flex: 1 as a style as Noah mentioned to ALL parent <View> components in the hierarchy also ensures the content is rendered. 将flex: 1作为Noah提到的样式应用于层次结构中的所有父<View>组件，还可以确保呈现内容。
解决方案2
0 2018-07-02 02:46:40
You should wrap everything in a View, with a style set like so: 您应该将所有内容包装在一个View中，其样式设置如下：
<View style={styles.container}>
<Header>...</Header>
<Content>
<Text>Some content</Text>
</Content>
<Footer>...</Footer>
</View>
And then in your stylesheet: 然后在您的样式表中：
const styles = StyleSheet.create({
container: {
flex: 1, // You should only need this
height: '100%', // But these wouldn't hurt.
width: '100%'
}
})
解决方案3
0 2018-07-02 09:09:02
try upgrading to latest version of native-base(current version is 2.6.1) 尝试升级到最新版本的native-base（当前版本为2.6.1）
import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
export default class App extends Component {
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>
<Footer>
<FooterTab>
<Button full>
<Text>Footer</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.