例如，有什么方法可以让多个选项卡（屏幕）与浏览器中的预览反应原生？答案

【问题标题】：any way to have multiple tabs(screens) in react native with a preview like in a browsers do for example?例如，有什么方法可以让多个选项卡（屏幕）与浏览器中的预览反应原生？
【发布时间】：2021-07-27 18:15:26
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native react-native-navigation

【解决方案1】：

您可以像这样使用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))
}

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

结果

【讨论】：

在这段代码中我面临一个问题。添加选项卡就可以了。但是您正在控制台上打印选项卡，任何地方都显示 []。另外，如果我显示标签。在第一个选项卡中计数。然后在使用它时它不会更新。它将始终显示起始值。
正如我在控制台上检查的那样，它缺少状态中的前 2 个选项卡对象。

【解决方案2】：

React Native 中不同屏幕的不同标签栏：

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

它只是帮助您为不同的屏幕设置不同的选项卡。

如果没有帮助，请告诉我。

【讨论】：