Question

由于一些奇怪的原因，标题的高度为667.我复制粘贴了示例页面中的代码。见截图：

代码：

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';

export default class HeaderIconTextExample extends Component {
  render() {
    return (
      <Container>
        <Header style={{backgroundColor:'red'}}>
          <Left>
            <Button transparent>
              <Icon style={{color:'white'}} name='menu' />
            </Button>
          </Left>
          <Body>
            <Title style={{color:'white'}}>{this.props.headerText}</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon style={{color:'white'}} name='ios-add' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

我尝试将高度应用于容器（例如100像素），但这并没有改变任何东西。

更新

我已经意识到，如果我删除ScrollView，那么内容就位于标题前面的顶部，如下所示：

代码：

import React, {
    Component
} from 'react';

import {
    ScrollView, View
} from 'react-native';

import KeyDetail from './KeyDetail'

import axios from 'axios';

class KeyList extends Component {
    state = {
        keys: []
    };

    componentWillMount() {
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(response => this.setState({ keys: response.data }));
    }

    renderKeys() {
        return this.state.keys.map(key => 
            <KeyDetail thekey={key} key={key.title} />
        );
    }

    render() {

        return (
            <ScrollView>
                { this.renderKeys() }
            </ScrollView>
        );
    }
}

export default KeyList;

index.ios.js

/**
 * Import a library to help create a component
 */

    import React from 'react';

    import {
        AppRegistry,
        View
    } from 'react-native';

    import Header from './src/components/Header';
    import KeyList from './src/components/KeyList';

/**
 * Create a component
 */

    const App = () => (
        <View style={{ flex: 1 }}>
            <Header headerText={'Your Keys'} />
            <KeyList />
        </View>
    );

/**
 * Render to device
 */

    AppRegistry.registerComponent('myapp', () => App);

Answer 1

嗯。解决方案（虽然不是很漂亮）是将KeyList包裹在index.ios.js内的View内，然后添加marginBottom以防止内容浮动在标题内。

index.ios.js

/**
 * Import a library to help create a component
 */

    import React from 'react';

    import {
        AppRegistry,
        View
    } from 'react-native';

    import Header from './src/components/Header';
    import KeyList from './src/components/KeyList';

/**
 * Create a component
 */

    const App = () => (
        <View style={{ flex: 1 }}>

            <Header headerText={'Your Keys'} />

            <View>
                <KeyList />
            </View>
        </View>
    );

/**
 * Render to device
 */

    AppRegistry.registerComponent('uniqkey', () => App);

Header.js

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';

export default class HeaderIconTextExample extends Component {
  render() {
    return (
      <Container style={{marginBottom:64}}>
        <Header style={{backgroundColor:'red'}}>
          <Left>
            <Button transparent>
              <Icon style={{color:'white'}} name='menu' />
            </Button>
          </Left>
          <Body>
            <Title style={{color:'white'}}>{this.props.headerText}</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon style={{color:'white'}} name='ios-add' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

Answer 2

在HeaderIconTextExample组件中，您尚未为标头指定height。在HeaderIconTextExample组件中添加此样式。

const Styles = StyleSheet.create({
  viewStyle: {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
 },
});
const { viewStyle } = Styles;

更新此行：

<Header style={{backgroundColor:'red'}}>

到此：

<Header style={viewStyle}>

它会正常工作。

您可以查看此相册的my complete github repo code反应原生应用。

奇怪的标题高度

更新

index.ios.js

2 个答案: