如何在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();
                }
            });