reactjs - 例如，有什么方法可以让多个选项卡(屏幕)与浏览器中的预览 react 原生？

Question

我想归档一个动态选项卡(可以打开和关闭)，并且能够像在任何浏览器中一样查看选项卡概览。知道从哪里开始吗？

Answer 1

• 您可以像这样使用 state 和 jsx 来控制 count of Navigator Tabs。

//tabs state
const [tabs, setTabs] = React.useState(
  [
    {
      name : "tab-1",
      component : TabScreen,
    },
    {
      name : "tab-2",
      component : TabScreen,
    }
  ]
)

//render
<Tab.Navigator>
  {
    tabs.map(tab => <Tab.Screen name={tab.name} component={tab.component} />)
  }
</Tab.Navigator>

• 像这样添加或删除标签

const addNewTab = () => {
  setTabs(tabs => [
    ...tabs,
    {
      name : "tab-" + (parseInt(tabs.pop().name.replace("tab-", "")) + 1),
      component : TabScreen,
    }
  ])
}


const remove = (route) => {
  setTabs(tabs => tabs.filter(tab => tab.name !== route.name))
}

• 使用 custom tabbar在标签标签中添加图标关闭。
  
• 使用 react context 或 redux 在它们之间共享状态。
  

这里只是一个简单的例子，你可以从它开始。试试snack在这里。

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';


const Tab = createMaterialTopTabNavigator();


export default function App() {


  const [tabs, setTabs] = React.useState([
      {
        name : "tab-1",
        component : TabScreen,
      }
  ])


  const addNewTab = () => {
    setTabs(tabs => [
      ...tabs,
      {
        name : "tab-" + (parseInt(tabs.pop().name.replace("tab-", "")) + 1),
        component : TabScreen,
      }
    ])
  }


  const remove = (route) => {
    setTabs(tabs => tabs.filter(tab => tab.name !== route.name))
  }


  function TabScreen({route}) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text onPress={addNewTab}>Add New Tab</Text>
        {
          route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>
        } 
      </View>
    );
  }



  return (
    <NavigationContainer>
      <Tab.Navigator>
        {
          tabs.map(tab => <Tab.Screen key={tab.name} name={tab.name} component={tab.component} />)
        }
      </Tab.Navigator>
    </NavigationContainer>
  );
}

结果