如何在react-native的ToolbarAndroid中設置navIcon的高度和寬度？

Question

我使用navIcon的ToolbarAndroid以顯示我的圖標react-native應用程序如下：

<ToolbarAndroid
    actions={[]}
    navIcon={require('./arrow-left-c.png')}
    onIconClicked={navigator.pop}
    style={{height:180,backgroundColor:'#a9a9a9'}}
    titleColor="white"
    title={route.name} />

但是問題是圖標arrow-left-c占據了整個屏幕的寬度。 我只想在左側顯示正常圖標。 如何設置此navIcon的寬度和高度？

Answer 1

當前，您無法在React本機ToolBarAndroid中設置navIcon的大小。

如提到的工具欄圖標的大小應該是24dp 這里 。

Answer 2

我有同樣的問題，我解決了。

我們知道我們需要帶24dp的圖標，並且我們需要重命名文件名，以@3X結尾，

如app_logo.png ===> app_logo@3x.png

您可以在RN圖片中找到

Answer 3

如果您為工具欄使用單獨的布局然后在工具欄中對其進行充氣，這將是一個更好的選擇。在這種布局中，您可以為其指定任何樣式大小的顏色和圖標。

采用新的xml文件app_bar布局，並在其中復制以下代碼。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorWhite">

        <ImageView
            android:id="@+id/btnBack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:padding="10dp"
            android:text="@string/back_font"
            android:textColor="@color/colorBtn"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/lblTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@+id/btnBack"
            android:text="Create Account"
            android:textColor="@color/colorBtn"
            android:textSize="18sp" />
</RelativeLayout>

然后在包含工具欄的活動中復制此代碼。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

final View barview =LayoutInflater.from(this).inflate(R.layout.app_bar_register, toolbar, false);
 toolbar.addView(barview);

 if (toolbar != null) {
                setSupportActionBar(toolbar);
            }
ImageView btnBack= (ImageView) barview.findViewById(R.id.btnBack);
btnBack.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onBackPressed();
                }
            });