Question

我在容器内具有标头，内容和页脚的简单解剖，但是仅标头可见，内容中不可见（仅标头和内容）

<Header>....</Header>
<Content><Text>Some content</Text></Content>

但是，如果我全部放置。页眉，内容和页脚。然后页脚替换页眉，只有页脚可见。内容在任何情况下都不可见。本机基础-v 2.3.1

Answer 1

只要层次结构中的某个父组件没有Noah Allen在其答案中列出的flex: 1，我就可以重现此内容。确保查看整个组件层次结构，以确保没有<View>被用作未样式化的包装器。

重现此错误的最简单方法是将所有内容包装在无样式的<View>组件中：

<View>
  <Container>
    <Header />
    <Content>
      <Text>
        This text does not show when Container is wrapped in a "View"
      </Text>
    </Content>
  </Container>
</View>

在此处查看演示： https://snack.expo.io/@asametrical/native-base-content-empty

删除<View>组件可使文本在<Content>内部呈现。将flex: 1作为Noah提到的样式应用于层次结构中的所有父<View>组件也可以确保内容呈现。

Answer 2

您应将所有内容包装在View中，并设置如下样式：

<View style={styles.container}>
  <Header>...</Header>
  <Content>
    <Text>Some content</Text>
  </Content>
  <Footer>...</Footer>
</View>

然后在样式表中：

const styles = StyleSheet.create({
  container: {
    flex: 1, // You should only need this
    height: '100%', // But these wouldn't hurt.
    width: '100%'
  }
})

Answer 3

尝试升级到最新版本的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>
    );
  }
}

内容基于本机不可见

3 个答案: