时间戳

首页 > 解决方案 > 在 React Native 的标题中创建带有图像的导航抽屉

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

问题描述

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 中类似的导航抽屉，并且抽屉标题将在其中包含图像和文本标签，在其下方将有抽屉项目，我将从这些项目导航到不同的屏幕。我试图使用上面的代码来实现这一点，但它不起作用。你能告诉我我哪里错了吗？我怎样才能实现我的目标？我是一个反应原生的新手，所以我请把我的概念说清楚

标签： androidreact-native

解决方案

首先创建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";

请注意：当您有更多要显示的项目时，ScrollView 是必需的：7+ 项目（在样式属性中带有边距）以及屏幕高度较小时

推荐阅读