React-Navigationでタブナビゲーションの背景色とバッジを設定する

Question

React-Native with React-Navigationには、次のようなタブナビゲーターがあります。

const testScreenNavigator = TabNavigator({
    Tab1: { screen: Tab1Screen },
    Tab2: { screen: Tab2Screen },
    Tab3: { screen: Tab3Screen },
});
testScreenNavigator.navigationOptions = {
    title: 'MY TITLE',
    header: {
        titleStyle:{
        },
        style:{
// how to set the options?
        },
    }  
}

今私は2つのことをしたい：

1. Android（iOSの下部のタブではない）のタブのbackgroundColor： 'red'を設定します
2. Tab1の横にバッジを付けます。例：.

Tab1（2）| Tab2 | Tab3

よろしく

Answer 1

• ヘッダーとタブのbackgroundColorを設定します

ヘッダーの背景色を設定するにはnavigationOptionsを使用し、タブの背景色を設定するにはtabBarOptionsを使用します。以下のコードを参照してください

const testScreenNavigator = TabNavigator ({
  Tab1: { screen: RecentChatsScreen },
  Tab2: { screen: AllContactsScreen },
  Tab3: { screen: AllContactsScreen}
}, {
  tabBarOptions : {
    style: {
      backgroundColor: '#42a5f5',
    }
  }
});

testScreenNavigator.navigationOptions = {
  title: 'MY TITLE',
  header: {
    style: {
      backgroundColor: '#42a5f5',
    }
  },
};

以下が出力されます