Question

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

此外，空选项卡也必须不可见，因此用户必须不能单击它们或在其上滑动。有办法吗？

此外，请注意-是否可以使用页面上的其他可单击项在选项卡之间导航？因此，例如，如果我使用.o标签（向左箭头和向右箭头），是否有一个功能可以帮助我在选项卡之间导航？

更改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> )应该可以在两个标签之间导航，但是目前它们没有用。

Answer 1

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

这比实际答案更像是一种变通方法，但是也许有人会发现这很有用：在标记marginLeft中使用负数marginRight和tabContainerStyle可以完成工作。我有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);
}

希望这会帮助一些迷失的灵魂，例如我自己，而他们不必浪费数小时的宝贵时间：）

有没有办法改变<tabs>中<tab>标签的宽度？

1 个答案: