2016-05-30 9 views
1

react-nativeのToolbarAndroidでnavIconの高さと幅を設定するにはどうすればいいですか?私は次のように私の<code>react-native</code>アプリケーションにアイコンを表示するように<code>ToolbarAndroid</code>の<code>navIcon</code>を使用しています

<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の幅と高さを設定するにはどうすればよいですか?

+0

の試みでこれを見つけたことができ

app_logo.png ===> [email protected]

として、我々は24dpとアイコンが必要知っている、と私たちは@3Xで終わるファイル名を変更する必要があります。ツールバーアンドロイド '。 ref: 'https:// github.com/oblador/react-native-vector-icons' –

答えて

-3

ツールバーにseprateレイアウトを使用してツールバーでそれを膨張させると、より良い選択肢になります。このレイアウトでは、任意のスタイルサイズの色とアイコンを与えることができます。

新しい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(); 
       } 
      }); 
+0

この質問は反応ネイティブです。 –

0

現在のところ、ReactネイティブToolBarAndroidでnavIconのサイズを設定することはできません。

ツールバーアイコンのサイズは、上記のhereのように24dpにする必要があります。

0

私は同じ問題を抱えていました。私はそれを解決しました。

あなたは `アイコンを使用するようにImages of RN

関連する問題

 関連する問題