Контент не виден native-base - PullRequest
Новая
       9

Контент не виден native-base

0 голосов
/ 01 июля 2018

У меня есть простая анатомия с заголовком, содержимым и нижним колонтитулом внутри контейнера, но виден только заголовок и ничего не видно в содержимом (только с заголовком и содержимым) 

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

Но, если я поставлю все, т.е. верхний колонтитул, содержание и нижний колонтитул. Затем нижний колонтитул заменяет верхний колонтитул, и виден только нижний колонтитул. Контент вообще не виден. native-base -v 2.3.1

Ответы [ 3 ]

0 голосов
/ 02 июля 2018

попробуйте обновить до последней версии 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>
    );
  }
}

enter image description here

0 голосов
/ 15 июля 2019

Я смог воспроизвести это в любое время, когда в иерархии есть родительский компонент, у которого нет 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 в качестве стиля, упомянутого Ноем, для ВСЕХ родительских <View> компонентов в иерархии также обеспечивает визуализацию контента.

0 голосов
/ 02 июля 2018

Вы должны обернуть все в 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%'
  }
})
...