React Native导航抽屉重叠状态栏。

Question

React Navigation抽屉式导航栏与Android状态栏有重叠，请问有什么方法可以避免这种情况发生吗？参考代码请见此处。

contentOptions: {
  style: {
    marginTop: 24,
  },
},

这只给内容增加了边距，而不是整个抽屉。

- Avery235

Answer 1

在<DrawerExample>组件之前加入<StatusBar />怎么样呢？ 别忘了要import { StatusBar } from 'react-native'。

- Akbar Rachman Gifari II

---

它会到达根组件，没有合适的地方可以放置它。 - Avery235

Answer 2

尝试这个，希望对你有所帮助

1. 创建“标题布局”，其中包括您想要的图像和文本。 输入图像描述（准备一个定制的菜单抽屉）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/ll_parenthide"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/colorAccent"
 android:orientation="vertical"
 android:theme="@style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginTop="@dimen/_10dp"
android:layout_marginBottom="@dimen/_10dp">
<ImageView
    android:id="@+id/ivProfile"
    android:layout_width="@dimen/_80dp"
    android:background="@drawable/no_image"
    android:layout_height="@dimen/_80dp"
    android:layout_gravity="center" />
<TextView
    android:id="@+id/tv_uName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/titleSize"
    android:layout_marginTop="@dimen/_10dp"
    android:textColor="@color/colorWhite"
    android:text=""
    android:gravity="center"
    android:layout_gravity="center"
    android:textAlignment="center" />
<TextView
    android:id="@+id/tv_user_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/textSize"
    android:layout_gravity="center"
    android:gravity="center"
    android:textColor="@color/colorWhite"
    android:layout_marginTop="@dimen/_5dp"
    android:text=""
    android:textAlignment="center" />
</LinearLayout>

---

2. 接下来为抽屉菜单创建另一个布局。这个布局是Parent_main

---

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v4.widget.DrawerLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/drawer_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:openDrawer="end">
 <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@+id/ll_layout_parent"
 android:orientation="vertical">
<include
android:id="@+id/include"
layout="@layout/tool_bar"></include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
    android:id="@+id/ll_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_55dp"
    android:background="@drawable/white_background"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </RelativeLayout>
    </LinearLayout>
    <LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_gravity="end">
<LinearLayout
    android:layout_width="@dimen/_1dp"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"/>
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="@dimen/_200dp"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_home"
    app:itemTextColor="@color/colorText">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/_160dp"
        android:listSelector="@color/colorWhite"
        android:divider="@null">
    </android.support.v7.widget.RecyclerView>
</android.support.design.widget.NavigationView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

---

创建导航适配器的类

---

public class NavigationDrawerAdapter extends 
RecyclerView.Adapter<NavigationDrawerAdapter.MyViewHolder> {
private LayoutInflater inflater;
private List<HashMap<String,String>> focusHeader;
private Context context;
public static boolean 
Snackbar snackbar;
String[] name={
"About Focus",
"FAQ",
"Help"};
 Integer[] image_ID={
 R.drawable.logo,
 R.drawable.faq,
 R.drawable.help,};
 Intent intent;
 public NavigationDrawerAdapter(List<HashMap<String,String>> 
 focusHeader,Context context) {
 this.focusHeader=focusHeader;
 this.context = context;
 inflater = LayoutInflater.from(context);}
 @Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 View view = inflater.inflate(R.layout.nav_drawer_row, parent, false);
 MyViewHolder holder = new MyViewHolder(view);
 return holder;
 }
 @Override
 public void onBindViewHolder(MyViewHolder holder, final int position) {
 holder.tv_subTitle.setText(name[position]);
 holder.iv_drawerIcon.setImageResource(image_ID[position]);
 holder.itemView.setOnClickListener(new View.OnClickListener() {
 @Override
public void onClick(View view) {

    else if (name[position].equals("About Focus")){

        }
    else if (name[position].equals("FAQ")){

    }
    else if (name[position].equals("Help")){

    }

    });
    }

    @Override
    public int getItemCount() {
    return name.length;
    }

   class MyViewHolder extends RecyclerView.ViewHolder {
   TextView tv_title,tv_subTitle;
   ImageView iv_drawerIcon;

   public MyViewHolder(View itemView) {
   super(itemView);
   iv_drawerIcon=itemView.findViewById(R.id.iv_drawerIcon);
   tv_subTitle=itemView.findViewById(R.id.tv_subTitle);
   }
   }

---

4. 为 nav_drawer_row 制作一个布局。

---

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:weightSum="1"
android:layout_margin="@dimen/_15dp">
<ImageView
    android:id="@+id/iv_drawerIcon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.8"/>
<TextView
    android:id="@+id/tv_subTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textSize="@dimen/textSize"
    android:layout_weight="0.2"
    android:textStyle="bold"
    android:layout_marginLeft="@dimen/_10dp"
    android:textColor="@color/colorWhite" />
</LinearLayout>

---

请使用这个类作为Parent_main

---

public class TabActivityClass extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.parent_main);
RecyclerView.LayoutManager mLayoutManager = new 
LinearLayoutManager(getApplicationContext());
rv_navigation.setLayoutManager(mLayoutManager);
rv_navigation.setItemAnimator(new DefaultItemAnimator());
rv_navigation.setAdapter(new NavigationDrawerAdapter(new 
ArrayList<HashMap<String, String>>(),parent_main.this));
drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawer, toolbar, R.string.navigation_drawer_open,
        R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.setDrawerIndicatorEnabled(false);
toggle.syncState();
}
}

- Vishal Yadav