如何在React Native中向标签栏添加新标签？

Question

我是新来的本地人。 我正在开发一个Android应用程序，其中我想通过单击按钮在选项卡栏上添加一个新选项卡，就像在浏览器中一样。 请谁能告诉我该怎么做？

Answer 1

在这里的文档中很清楚https://reactnavigation.org/docs/intro/nesting

范例程式码

import { TabNavigator } from "react-navigation";

class RecentChatsScreen extends React.Component {
  render() {
    return <Text>List of recent chats</Text>
  }
}

class AllContactsScreen extends React.Component {
  render() {
    return <Text>List of all contacts</Text>
  }
}

const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

Answer 2

请检查此链接 。 我建议您使用nativebase使其更容易，因为它们可以提供可滚动的选项卡。 然后将添加按钮放在可滚动选项卡的末尾。 这是可滚动标签代码的示例：

 import React, { Component } from 'react'; import { Container, Header, Tab, Tabs } from 'native-base'; import Tab1 from './tabOne'; import Tab2 from './tabTwo'; ​export default class TabsScrollableExample extends Component { render() { return ( <Container> <Header hasTabs/> <Tabs renderTabBar={()=> <ScrollableTab />}> <Tab heading="Tab1"> <Tab1 /> </Tab> <Tab heading="Tab2"> <Tab2 /> </Tab> <Tab heading="Tab3"> <Tab3 /> </Tab> <Tab heading="Tab4"> <Tab4 /> </Tab> <Tab heading="Tab5"> <Tab5 /> </Tab> </Tabs> </Container> ); } } 

Answer 3

使用本机基础库在选项卡栏中添加新选项卡

您可以点击“添加标签”按钮添加新标签

 import { Container, ScrollableTab, Tab, Tabs, Text, Button } from 'native-base'; state={ category:[]} renderTabButton() { this.setState({category: [...this.state.category, (<Tab heading="Add Category"> <Text>Tab 1</Text> </Tab>)]})}; render() { return ( <Container> <Tabs renderTabBar={() => <ScrollableTab />}> {this.state.category} </Tabs> <Button onPress={this.renderTabButton.bind(this)}> <Text> Add Tab</Text> </Button> </Container>