菜单栏在搜索栏​​内

Question

我正在使用 React-Native 构建电子商务应用程序； 我试图添加抽屉导航，但几乎没有错误image1 with drawer inside the search bar

正如您在图片中看到的，它位于搜索栏内，我希望它位于搜索栏旁边 第二个错误是它在搜索栏内打开，如下图所示image2 with drawer opened inside the search bar

预期行为：

我想要蓝色搜索栏旁边的菜单 header 并且我想要隐藏菜单图标旁边的主页名称

我的代码：

import React, {Component} from 'react';
import {SafeAreaView, View, TextInput, StatusBar} from 'react-native';
import Feather from 'react-native-vector-icons/Feather';
import Menu from './Menu';

class Headers extends Component {
  render() {
    return (
      <SafeAreaView style={{backgroundColor: '#22e3dd'}}
      >
        <View
          style={{
            marginTop: 24,
            marginLeft: 50,
            margin: 10,
            padding: 5,
            backgroundColor: 'white',
            flexDirection: 'row',
            alignItems: 'center',
          }}>
            <Menu />
          <StatusBar
            barstyle="dark-content"
            backgroundColor="#22e3dd"
            hidden={false}
            translucent={false}
          />
          <Feather name="search" size={20} />
          <TextInput style={{height: 40, margin: 9}} placeholder="Search..." />
        </View>
      </SafeAreaView>
    );
  }
}

export default Headers;

Answer 1

这是因为您的菜单组件位于带有白色背景的视图中，只需将其移出即可修复按钮位置。

<SafeAreaView style={{backgroundColor: '#22e3dd',flexDirection: 'row'}}>
        <Menu />
        <View
          style={{
            marginTop: 24,
            marginLeft: 50,
            margin: 10,
            padding: 5,
            backgroundColor: 'white',
            flexDirection: 'row',
            alignItems: 'center',
          }}>
            
          <StatusBar
            barstyle="dark-content"
            backgroundColor="#22e3dd"
            hidden={false}
            translucent={false}
          />
          <Feather name="search" size={20} />
          <TextInput style={{height: 40, margin: 9}} placeholder="Search..." />
        </View>
      </SafeAreaView>