有什么方法可以像在浏览器中那样让多个选项卡（屏幕）在本机与预览反应？

html5 • • 问答

我想存档一个动态标签（可以打开和关闭），能够像在任何浏览器中一样查看标签概述。知道从哪里开始吗？

回答

  • 你可以像这样count of Navigator Tabs用state&控制jsx。
//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))
}
  • 使用自定义标签栏在标签标签中添加关闭图标。
  • 使用react context或redux在它们之间共享状态。

这里只是一个简单的例子，你可以从它开始。尝尝这里的小吃。

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>
  );
}

结果

以上是有什么方法可以像在浏览器中那样让多个选项卡（屏幕）在本机与预览反应？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>