Question

import React, { Component } from 'react';
import { Alert, Button, TextInput, View, StyleSheet, Text, AsyncStorage } from 'react-native';
import { DrawerItems, DrawerNavigation } from 'react-navigation';

export default class Home extends Component {

const DrawerContent = (props) => (
  <View>
    <View
      style={{
        backgroundColor: '#f50057',
        height: 140,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: 'white', fontSize: 30 }}>
        Header
      </Text>
    </View>
    <DrawerItems {...props} />
  </View>
)

const Navigation = DrawerNavigator({
  // ... your screens
   Home:{ 
      screen: HomeScreen,
   },
   Settings: {
      screen: SettingsScreen,
   },

}, {
  // define customComponent here
  contentComponent: DrawerContent,
})


  render() {

    return (
        <View>
        <Text>Welcome To Home</Text>
      </View>
    );
  }
}

我正在设计一个屏幕，它将成为我的应用程序的主屏幕。该屏幕将具有类似于Android中的导航抽屉，并且抽屉标题将在其中包含图像和文本标签，在其下方将有抽屉项目，我将从中导航到其他屏幕。我试图使用上面的代码来实现这一点，但是它不起作用。你能告诉我我错了吗？我如何实现我的目标？我是新手，可以对本地语言做出反应，所以请明确我的概念

Answer 1

请用以下代码替换您的 DrawerContent ，并检查其是否有效。

const DrawerContent = (props) => {
  return (
    <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
      <View style={{ flexDirection: 'row', paddingBottom: 20 }}>
        <View style={{ flex: 80, backgroundColor: '#f50057'}}>
            <Image style={{ width: 181, height: 132}} source={images.logo} />
        </View>
          <Text style={{ color: '#000', fontSize: 30 }}>Header</Text>
      </View>
      <DrawerItems {...props}/>
    </SafeAreaView>
)};

Answer 2

首先创建Drawer Component

export default class DrawerComponent extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView>
          <View style={{ backgroundColor: "white" }}>
            <Image
              style={{ margin: 15 }}
              source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}

            />
          </View>
          <DrawerItems {...this.props} />
        </ScrollView>
      </SafeAreaView>
    );
  }
}

并将组件导入您的Home.js

import DrawerComponent from "./path/to/drawerComponent";

请注意：：当您有更多项目要显示 ex：7个以上项目（样式项中有边距）时，以及屏幕高度时，必须使用ScrollView小

在React Native中的标题中创建带有图像的导航抽屉

2 个答案: