有没有办法更改标签的宽度<Tab><Tabs>？

Question

我正在开发一个应用程序，其中一个页面有选项卡。第一个和最后一个选项卡的宽度必须小于其间的宽度。React Native中是否可以有不同宽度的选项卡？

此外，空选项卡必须是不可见的，因此，用户不能点击或滑动它们。有办法做到这一点吗？

此外，附带说明一下，是否可以使用页面上的其他可点击项目在选项卡之间导航？例如，如果我使用Icon标签，向左和向右箭头，是否有一个功能可以帮助我在选项卡之间导航？

更改tabStyle宽度和正常style宽度没有帮助。。。谷歌搜索也无济于事：\

不知道如何使选项卡"不可导航"。在谷歌上搜索，什么也找不到。

我有箭头，它们是整个问题的原因(项目中需要它们)_(ツ)_/)。但也不知道如何让它们在选项卡之间导航。

showTabs():
var dates = []; /*a list of dates*/
var headings = [];
headings.push (
<Tab 
style={{
width: 5, 
borderWidth:0, 
elevation: 0, 
backgroundColor: '#f4f4f4'
}} 
heading={<Text></Text>}> /*empty tab*/
</Tab>
);
dates.forEach( (date) => {
headings.push (
<Tab
tabStyle={{backgroundColor:'#f4f4f4'}}
textStyle={{color: '#6e6e6e'}}
activeTabStyle={{
backgroundColor:'white', 
borderTopWidth: 5, 
borderColor: '#0a7acb', 
borderBottomRightRadius: 5, 
borderBottomLeftRadius: 5, 
borderTopRightRadius: 1, 
borderTopLeftRadius: 1, 
elevation: 1
}}
activeTextStyle={{color: '#6e6e6e', fontWeight: 'bold'}}
heading={ moment(date).format("ddd DD MMM") }
style={{
borderWidth:0, 
elevation: 3, 
backgroundColor: '#f4f4f4' 
}}
>
{this.aFunction(usesDates))}
</Tab>
);
});
headings.push (
<Tab 
style={{
width: 5, 
borderWidth:0, 
elevation: 0, 
backgroundColor: '#f4f4f4'
}} 
heading={<Text></Text>}> /*empty tab*/
</Tab>
);
return(
<Tabs>
{headings}
</Tabs>
)

宽度应该更小，但实际上与其他选项卡的宽度相同。

空选项卡必须不可见，但用户仍然可以向左/向右滑动。

箭头Icons应该能够在选项卡之间导航，但它们目前毫无用处。

Answer 1

以下并不是上面发布的问题的最佳解决方案，但它对我有效：

这更多的是一种变通方法，而不是一个实际的答案，但也许有人会发现这很有用：在标签中使用tabContainerStyle中的负marginLeft和marginRight完成了这项工作。我有两个空标签，我可以在中途被压扁，因为它们被其他absolutely定位的元素覆盖

<Tabs tabContainerStyle={{marginLeft: -45, marginRight: -45}}>
<Tab>{TabData1}</Tab>
<Tab>{TabData2}</Tab>
<Tab>{TabData3}</Tab>
</Tabs>

还有一个解决方法：空选项卡仍然可以查看，但由于我们在该布局中加载了3天的数据，我们只是确保在滑动到空选项卡时，会显示前/后3天的新数据。

实际答案：要使用其他组件(例如，向左/向右箭头)导航到不同的选项卡，可以将ref添加到标记中，并通过以下方式进行调用：CCD_ 10、CCD_。这也解决了第一个选项卡中初始渲染时未加载数据的问题…因此，在ComponentDidMount中设置超时将确保屏幕导航到所需的选项卡，并在初始渲染时加载所有数据。GitHub:上发现类似问题的链接

this.state={
initialTabPage: 1
}
<Tabs ref={REFERENCE} tabContainerStyle={{marginLeft: -45, marginRight: -45}}>
<Tab>{DayOneData}</Tab>
<Tab>{DayTwoData}</Tab>
<Tab>{DayThreeData}</Tab>
</Tabs>
ComponentDidMount(){
this.gotToTab()
}
gotToTab(){
setTimeout(()=> {
this.refs.REFERENCE.goToPage(this.state.initialTabPage)
}, 200);
}

希望这能帮助一些像我这样迷失的灵魂，他们不需要浪费几个小时的宝贵时间：)