android - 有没有办法改变 <Tabs> 中 <Tab> 标签的宽度？

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>
)

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

空标签不得可见，但用户仍然可以向左/向右滑动。

Arrow Icons 应该可以在选项卡之间导航，但目前没有用。

Answer 1

以下并不是解决上述问题的最佳解决方案，但它对我有用:

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

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

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

实际答案: 要使用其他组件(例如，左箭头/右箭头)导航到不同的选项卡，您可以向标签添加 ref 并通过以下方式调用它: this.refs.mytabs.goToPage(x)，x 是标签在数组中的索引。 这也解决了第一个选项卡中初始渲染时数据未加载的问题...因此，在 ComponentDidMount 中设置超时将确保屏幕导航到您想要的选项卡，并将加载初始渲染的所有数据。 Link在 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);
}

希望这能帮助像我这样迷失的灵魂，他们不需要浪费宝贵的时间:)