Question

我在NativeBase（React Native的UI组件）中的Header组件遇到了一点问题。它的位置应该在顶部。但是，我的是一块白色的块。我不知道为什么会这样。

这是我的代码

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;

结果就像这样

正如您所见，具有搜索图标的标题位于空白/白色下方。为什么会这样？也许有很多朋友在使用NativeBase UI组件之前已经体验过它。

Answer 1

这是因为你也在使用StackNavigator。您可以按如下方式禁用标题。

static navigationOptions = {
    headerMode: 'none'
  }

Answer 2

React Navigation 5.x的更新

如果要在反应导航5中使用Nativebase的标头，则可以这样操作：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import {
  Header,
  Left,
  Body,
  Title,
  Button,
  Icon,
  View,
  Text
} from 'native-base';

const Stack = createStackNavigator();

const Home = () => {
    return (
        <View>
            <Text>Hello World</Text>
        </View>
    )
}

const CustomHeader = ({scene, previous, navigation}) => {
  const {options} = scene.descriptor;
  const title =
    options.headerTitle !== undefined
      ? options.headerTitle
      : options.title !== undefined
      ? options.title
      : scene.route.name;

  return (
    <Header>
      <Left>
        {previous ? (
          <Button transparent onPress={navigation.goBack}>
            <Icon name="arrow-back" />
          </Button>
        ) : (
          undefined
        )}
      </Left>
      <Body>
        <Title>{title}</Title>
      </Body>
    </Header>
  );
};

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen
                name="Home"
                component={Home}
                options={{
                header: (props) => <CustomHeader {...props} />,
              }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

https://reactnavigation.org/docs/en/stack-navigator.html

中的更多选项

Answer 3

在导航选项中将标头设置为空以删除顶部空白，如下所示

export default class Home extends React.Component {

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

}

为什么NativeBase中的Header组件不在顶部？

3 个答案: