如何在反应原生中向标签栏添加新选项卡？

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

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

你可以点击“添加标签”＆＃39;按钮添加新选项卡

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>