react-native - react-native-navbar のアクティブなタブを中央に配置

Question

スクロール可能なナビゲーション バーのアクティブなタブを中央に配置したいと思います。現在、スクロール可能な水平ビューを持っていますが、ビューの更新に行き詰まっています。here on github などの他の例を見ています。_updateView メソッドの作成に関するフィードバックをお待ちしております。この問題を解決するには、いくつかのフレックスボックス ルールを単に追加するだけではないようです。

これが私のコンポーネントコードです。

export default class MenuNavBar extends Component {
  static propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
  }
constructor(props) {
    super(props)
    var screenWidth = Dimensions.get('window').width;
    this.state = {
      paddingLeft: 5,
      paddingRight: 5,
      titleMenuWidth: screenWidth - 100
    };
    this._onScroll = this._onScroll.bind(this);
    this._onClickMenu = this._onClickMenu.bind(this);


componentDidMount() {
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue.bind(this));
  }
  _onClickMenu(index) {
    this.props.goToPage(index);
    this._updateView(index);
  }
  _updateView(index) {
    var navContainerWidth = Dimensions.get('window').width - 100;
     console.log('navContainerWidth', navContainerWidth)
  }
  _onTabLayout(event, i) {
    this.menuTabs[i] = (this.menuTabs[i]) ? this.menuTabs[i] : event.nativeEvent.layout.width;
  }
_onScroll(event) {
    let {
      contentSize,
      contentInset,
      contentOffset,
      layoutMeasurement,
    } = event.nativeEvent;
  }
  _renderMain() {
    return (
      <NavigationBar
        title={
          <ScrollView ref='menuScrollView' onScroll={this._onScroll} onLayout={this._onLayout} style={{width: this.state._titleMenuWidth}} horizontal={true} showsHorizontalScrollIndicator={false}>
            {this.props.tabs.map((tab, i) => {
              if (i == 0) {
                ref_name = 'tab_' + i;
                component_style = {
                  paddingTop: 5,
                  paddingBottom: 5,
                  paddingLeft: this.state.paddingLeft,
                  paddingRight: 5,
                };
              } else if (i == this.props.tabs.length - 1) {
                ref_name = 'tab_' + i;
                component_style = {
                  paddingTop: 5,
                  paddingBottom: 5,
                  paddingLeft: 5,
                  paddingRight: this.state.paddingRight,
                };
              } else {
                ref_name = "tab_" + i;
                component_style = styles.navbarMenuButton;
              }
              return <TouchableOpacity ref={ref_name} key={tab} onLayout={(event) => this._onTabLayout(event, i)} onPress={() => this._onClickMenu(i)} style={component_style}>
                <Text style={this.props.activeTab === i ? styles.navbarMenuTextActive : styles.navbarMenuText}>{tab}</Text>
              </TouchableOpacity>;
            })}
          </ScrollView>
        }
        leftButton={
          <View>
            <Image source={require('../../assets/imgs/logo.png')} style={styles.navbarLogo} />
          </View>
        }
        style={styles.headerStyle}
        statusBar={{tintColor: '#6C0104'}} />
    );
  }

  _renderTrend() {
    return (
      <NavigationBar
        title={
          <ScrollView ref='menuScrollView' onScroll={this._onScroll} onLayout={this._onLayout} style={{width: titleMenuWidth}} horizontal={true} showsHorizontalScrollIndicator={false}>
            {this.props.tabs.map((tab, i) => {
              if (i == 0) {
                ref_name = 'tab_' + i;
                component_style = {
                  paddingTop: 5,
                  paddingBottom: 5,
                  paddingLeft: this.state.paddingLeft,
                  paddingRight: 5,
                };
              } else if (i == this.props.tabs.length - 1) {
                ref_name = 'tab_' + i;
                component_style = {
                  paddingTop: 5,
                  paddingBottom: 5,
                  paddingLeft: 5,
                  paddingRight: this.state.paddingRight,
                };
              } else {
                ref_name = "tab_" + i;
                component_style = styles.navbarMenuButton;
              }
              return <TouchableOpacity ref={ref_name} key={tab} onLayout={(event) => this._onTabLayout(event, i)} onPress={() => this._onClickMenu(i)} style={component_style}>
                <Text style={this.props.activeTab === i ? styles.navbarMenuTextActive : styles.navbarMenuText}>{tab}</Text>
              </TouchableOpacity>;
            })}
          </ScrollView>
        }
        leftButton={
          <View>
            <Image source={require('../../assets/imgs/logo.png')} style={styles.navbarLogo} />
          </View>
        }
        rightButton={
          <View>
            <TouchableOpacity onPress={() => Actions.country()}>
              <Image source={require('../../assets/imgs/ic_world.png')} style={styles.worldLogo} />
            </TouchableOpacity>
          </View>
        }
        style={styles.headerStyle}
        statusBar={{tintColor: '#6C0104'}} />
    );
  }

  render() {
    var screenWidth = Dimensions.get('window').width;
    var titleMenuWidth = screenWidth - 100;

    return (this.props.mode == 'main') ? this._renderMain() : this._renderTrend();
  }
}

PS私はそれをよりよく理解するので、この質問をより明確にするために更新します。