Почему компонент заголовка в NativeBase не находится сверху? - PullRequest
Новая
       9

Почему компонент заголовка в NativeBase не находится сверху?

0 голосов
/ 28 апреля 2018

У меня небольшая проблема с компонентом Header в NativeBase (UI Component для React Native). Его позиция должна быть сверху. Но мой находится ниже белого блока. Я не знаю, почему это там.

Вот мой код 

import React, { Component } from 'react';
import { Image } from 'react-native';
import { 
  Container, 
  Header, 
  Left, 
  Body, 
  Right, 
  Title, 
  Content, 
  Footer, 
  FooterTab, 
  Button, 
  Icon, 
  Text,
  List, 
  ListItem,
  Switch,
  Item, 
  Input,
  Form,
  DeckSwiper,
  Card, 
  CardItem, 
  Thumbnail,
  View
} from 'native-base';
import { Col, Row, Grid } from "react-native-easy-grid";
import { StackNavigator } from 'react-navigation';
import Expo from "expo";
import { cards, groups_category } from '../data/dummies';

class HomeScreen extends Component {

  constructor (props) {
    super(props);

    this.state = {
      loading: true,
      isUserLogin: false,
      searchStatus: false
    }

    this.showSearch = this.showSearch.bind(this);
    this.checkLoginStatus = this.checkLoginStatus.bind(this);
  }

  async componentWillMount() {
    await Expo.Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
      'Ionicons': require("@expo/vector-icons/fonts/Ionicons.ttf")
    });
    this.setState({ loading: false });
  }

  showSearch () {
    this.setState({ searchStatus: !this.state.searchStatus });
  }

  checkLoginStatus () {
    if (!this.state.isUserLogin) {
      return this.props.navigation.navigate('Login');
    } else {
      return
    }
  }

  render() {
    if (this.state.loading) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        { this.state.searchStatus &&
          (<Header searchBar rounded>
            <Item regular>
              <Icon name='md-arrow-back' onPress={this.showSearch} />
              <Input placeholder='Contoh: Jakarta Memancing'/>
              <Icon name='search' />
            </Item>
          </Header>)
        }
        { !this.state.searchStatus &&
          (<Header>
            <Left>
              <Icon name='add' style={{color: '#FFFFFF'}} />
            </Left>
            <Body style={{ alignItems: 'center' }}>
              <Title>Komunitas</Title>
            </Body>
            <Right>
              <Icon name='search' style={{color: '#FFFFFF'}} onPress={this.showSearch} />
            </Right>
          </Header>)
        }
        {/* Content */}
        <Content padder={true}>
          <View style={{height: 470}}>
            <DeckSwiper
              dataSource={cards}
              renderItem={item =>
                <Card style={{ elevation: 3 }}>
                  <CardItem>
                    <Left>
                      <Thumbnail source={item.image} />
                      <Body>
                        <Text>{item.text}</Text>
                        <Text note>NativeBase</Text>
                      </Body>
                    </Left>
                  </CardItem>
                  <CardItem cardBody>
                    <Image style={{ height: 300, flex: 1 }} source={item.image} />
                  </CardItem>
                  <CardItem>
                    <Icon name="heart" style={{ color: '#ED4A6A' }} />
                    <Text>{item.name}</Text>
                  </CardItem>
                </Card>
              }
            />
          </View>
          <List>
            <ListItem itemHeader first>
              <Text>Kategori Grup</Text>
            </ListItem>
            {groups_category.map(group => {
                return (<ListItem key={group.id}>
                  <Left>
                    <Icon name={group.icon}/>
                  </Left>
                  <Body>
                    <Text>{group.name}</Text>
                  </Body>
                  <Right />
                </ListItem>) 
              }
            )}
          </List>
        </Content>
        {/* Content */}
        <Footer>
          <FooterTab>
            <Button vertical active>
              <Icon active name="home" />
              <Text style={{fontSize: 9.5}}>Home</Text>
            </Button>
            <Button vertical>
              <Icon name="megaphone" />
              <Text style={{fontSize: 9.5}}>Baru</Text>
            </Button>
            <Button vertical>
              <Icon name="notifications" />
              <Text style={{fontSize: 9.5}}>Notifikasi</Text>
            </Button>
            <Button onPress={this.checkLoginStatus} vertical>
              <Icon name="person" />
              <Text style={{fontSize: 9.5}}>Profil</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

export default HomeScreen;

Получается вот так

Home page

Как видите, заголовок, в котором есть значок поиска, расположен ниже пустого места / белого цвета. Почему это случилось? Возможно, здесь многие знакомые уже сталкивались с этим при использовании NativeBase UI Component.

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Установить заголовок пустым в опции навигации, чтобы убрать верхнее пустое пространство, как показано ниже 

export default class Home extends React.Component {

static navigationOptions = {
title: 'Home',
header: null //used for removing blank space from top
};

}
0 голосов
/ 28 апреля 2018

Это потому, что вы используете StackNavigator. Вы можете отключить заголовок, как показано ниже. 

static navigationOptions = {
    headerMode: 'none'
  }
...