Есть ли способ изменить ширину тега <Tab>в <Tabs>?

Question

Я работаю над приложением, где на одной из страниц есть вкладки. Первая и последняя вкладки должны иметь ширину меньше, чем между ними. Можно ли иметь разную ширину вкладок в React Native?

Кроме того, пустые вкладки не должны быть доступны для просмотра, поэтому пользователь не должен иметь возможность щелкать по ним или проводить по ним. Есть ли способ сделать это?

Кроме того, на заметку о том, можно ли использовать другие интерактивные элементы на странице для перемещения между вкладками? Так, например, если я использую тег Icon, стрелка влево и стрелка вправо, есть ли функция, которая может помочь мне перемещаться между вкладками?

Изменение ширины tabStyle и нормальной ширины style не помогло ... Поиск в Google также не помог: \

Не знаю, как сделать вкладки «не навигационными». Погуглил - ничего не смог найти.

У меня есть стрелки, они являются причиной всей этой проблемы (они нужны в проекте ¯_ (ツ) _ / ¯). Но также не знаю, как заставить их перемещаться между вкладками.

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

Следующее не совсем лучшее решение проблемы, указанной выше, но у меня это сработало:

Это скорее обходной путь, чем реальный ответ, но, возможно, кто-то найдет это полезным: Использование отрицательных marginLeft и marginRight в tabContainerStyle в теге сделало свою работу. У меня было 2 пустых вкладки, которые я мог позволить себе раздавить на полпути, так как они были покрыты другими absolutely расположенными элементами

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

Также обходной путь: Пустые вкладки по-прежнему доступны для просмотра, но из-за того, что мы загружаем данные за 3 дня в этом макете, мы просто убедились, что при пролистывании на пустые вкладки будут отображаться новые данные за предыдущие / следующие 3 дня.

Фактический ответ: Чтобы перейти на другие вкладки с помощью других компонентов (например, стрелка влево / вправо), вы можете добавить ref к тегу и вызвать его следующим образом: this.refs.mytabs.goToPage(x), x - индекс вкладки в массиве. Это также решает проблему с загрузкой данных при первоначальном рендеринге на первой вкладке ... Таким образом, установка времени ожидания в 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);
}

Надеюсь, это поможет некоторым потерянным душам, таким как я, и им не нужно будет тратить часы драгоценного времени:)