Question

我知道之前已经问过这个问题，但就我的情况而言，我无法找到答案。我正在帮助与朋友制作应用程序，我的任务是为我们的一个屏幕制作DrawerNavigator。我正在使用本地反应。

这是我的一个屏幕类中的渲染功能

  render() { 
     return ( 
       <Container>
        <Header title='BarMate'/> 
        <View style={styles.container}>
            <MapView
              style={{ alignSelf: 'stretch', height: 750}}
              region={this.state.mapRegion}
              onRegionChange={this._handleMapRegionChange}
            />
        </View>    
      </Container>
    );
  }

问题在于，当我尝试向标题添加图标和按钮时，它就不会显示出来。这是我添加图标后的代码

render() { 
    return ( 
      <Container>

      <Header title='BarMate'>
        <Left>
          <Icon name="ios-menu" onPress={() =>
            this.props.navigation.navigate('DrawerOpen')} />
        </Left> 
      </Header>

      <View style={styles.container}>
        <MapView
          style={{ alignSelf: 'stretch', height: 750}}
          region={this.state.mapRegion}
          onRegionChange={this._handleMapRegionChange}
        />
      </View>  

  </Container>
);
}

但是，如果不是从这样的自定义文件中导入Container和Header，则此代码可以正常工作：

import { Container } from '../components/Container'
import { Header } from '../components/Header'

我像这样导入它们：

import {Container, Header, Icon, Button, Content, Left } from 'native-base'

我是一个反应原生的初学者，所以我可能会忽略一些东西，但任何帮助都会受到赞赏。这是我朋友制作的容器和标题文件中的内容。

//Header file
import React from 'react';

import { View, Text, StatusBar } from 'react-native';
import { Icon, Button, Content, Left} from 'native-base'

import styles from './styles';


const Header = ({title}) => (
    <View style={styles.container}>
        <StatusBar translucent={false} barStyle="light-content" />
        <Text style={styles.title}>{title}</Text>
    </View>
);
export default Header;




//Container file
import React from 'react';
import PropTypes from 'prop-types'; // ES6

import { View } from 'react-native';
import styles from './styles';

const Container = ({ children }) => (
    <View style={styles.container}>
        {children}
    </View>
);

Container.propTypes = {
    children: PropTypes.any,
}

export default Container;

如何在本机中添加NavigationDrawer？

0 个答案: