react-native的ToolbarAndroid中如何设置navIcon的高度和宽度？答案

【问题标题】：How to set the height and width of navIcon in ToolbarAndroid of react-native?react-native的ToolbarAndroid中如何设置navIcon的高度和宽度？
【发布时间】：2016-09-27 19:40:34
【问题描述】：

我正在使用ToolbarAndroid 中的navIcon 在我的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的宽高？

【问题讨论】：

尝试使用Icon.ToolbarAndroid。参考这里：https://github.com/oblador/react-native-vector-icons

标签： android react-native android-toolbar

【解决方案1】：

如果你对工具栏使用单独的布局，然后在工具栏中对其进行膨胀，这将是一个更好的选择。在这种布局中，你将能够为其赋予任何样式大小的颜色和图标。

新建一个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();
                }
            });

【讨论】：

这个问题是针对 react-native 的。

【解决方案2】：

目前你无法在 React 原生 ToolBarAndroid 中设置 navIcon 的大小。

工具栏图标大小应为 24dp，如 here 所述。

【讨论】：

【解决方案3】：

我遇到了同样的问题，我解决了。

我们知道我们需要 24dp 的图标，我们需要重命名文件名以 @3X 结尾，

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

你可以在Images of RN找到这个

【讨论】：