React native 将活动选项卡居中放置在本机导航栏中

我想将活动选项卡置于可滚动导航栏的中心。目前我有一个可滚动的水平视图，但我一直在更新视图。我在看另一个。我很想得到一些关于创建updateView方法的反馈，解决这个问题似乎不仅仅是添加一些flexbox规则

这是我的组件代码

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

导出默认类MenunaBar扩展组件{
静态支撑类型：{
goToPage:React.PropTypes.func，
activeTab:React.PropTypes.number，
选项卡：React.PropTypes.array，
}
建造师（道具）{
超级（道具）
var screenWidth=Dimensions.get（'window'）.width；
此.state={
paddingLeft:5，
paddingRight:5，
titleMenuWidth:屏幕宽度-100
};
this.\u onScroll=this.\u onScroll.bind（this）；
this.\u onClickMenu=this.\u onClickMenu.bind（this）；
componentDidMount（）{
this._listener=this.props.scrollValue.addListener（this.setAnimationValue.bind（this））；
}
_onclick菜单（索引）{
this.props.goToPage（索引）；
此._updateView（索引）；
}
_更新视图（索引）{
var navContainerWidth=Dimensions.get（'window'）。宽度-100；
log（'navContainerWidth'，navContainerWidth）
}
_onTabLayout（事件一）{
this.menuTabs[i]=（this.menuTabs[i]）？this.menuTabs[i]：event.nativeEvent.layout.width；
}
_onScroll（活动）{
让{
内容大小，
内容插图，
内容抵消，
布局测量，
}=event.nativeEvent；
}
_renderMain（）{
返回(
{
如果（i==0）{
ref_name='tab_'+i；
组件样式={
paddingTop:5，
填充底部：5，
paddingLeft:this.state.paddingLeft，
paddingRight:5，
};
}else if（i==this.props.tabs.length-1）{
ref_name='tab_'+i；
组件样式={
paddingTop:5，
填充底部：5，
paddingLeft:5，
paddingRight:this.state.paddingRight，
};
}否则{
ref_name=“tab_”+i；
component_style=styles.navbarMenuButton；
}
返回此。_onTabLayout（event，i）}onPress={（）=>this。_onClickMenu（i）}style={component\u style}>
{tab}
;
})}
}
左键={
}
style={styles.headerStyle}
状态栏={{tintColor:'#6C0104'}}/>
);
}
_renderTrend（）{
返回(
{
如果（i==0）{
ref_name='tab_'+i；
组件样式={
paddingTop:5，
填充底部：5，
paddingLeft:this.state.paddingLeft，
paddingRight:5，
};
}else if（i==this.props.tabs.length-1）{
ref_name='tab_'+i；
组件样式={
paddingTop:5，
填充底部：5，
paddingLeft:5，
paddingRight:this.state.paddingRight，
};
}否则{
ref_name=“tab_”+i；
component_style=styles.navbarMenuButton；
}
返回此。_onTabLayout（event，i）}onPress={（）=>this。_onClickMenu（i）}style={component\u style}>
{tab}
;
})}
}
左键={
}
右按钮={
Actions.country（）}>
}
style={styles.headerStyle}
状态栏={{tintColor:'#6C0104'}}/>
);
}
render（）{
var screenWidth=Dimensions.get（'window'）.width；
变量titleMenuWidth=屏幕宽度-100；
return（this.props.mode=='main'）？this.\u renderMain（）：this.\u renderrend（）；
}
}

---

另外，我会更新这个问题，使之更清楚，因为我对它有更好的理解

更新：我已经完成了这个任务，我发现很难进行逻辑推理。在我自己写答案指南之前，我正在探索更多的选项，并试图完全理解API。你介意分享一下吗。我很想尝试一下，并/或在@mibbitUpdate给出一些反馈：我已经完成了这项任务，我发现很难进行逻辑推理。在我自己写答案指南之前，我正在探索更多的选项，并试图完全理解API。你介意分享一下吗。我很想尝试一下，或者给一些反馈@mibbit