Question

React Navigation Drawer与Android状态栏重叠。有办法防止这种情况吗？来源here

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

这仅为内容提供了保证金，而不是整个抽屉。

Answer 1

试试希望它对您有所帮助

1.制作“标题布局”，其中，您想要的图像和文字。 enter image description here（准备自定义菜单抽屉）

<?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>

然后为抽屉菜单制作另一个布局。这是 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);
   }
   }

为 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();
}
}

Answer 2

如何在<StatusBar />组件之前添加<DrawerExample>？别忘了import { StatusBar } from 'react-native'。

React Native Navigation Drawer重叠状态栏

2 个答案: