使用react-native-tab-view固定功能执行卡片导航？

Question

我目前使用的是react导航和react-native-tab-view。如果我想要导航到另一个屏幕，但将选项卡视图保持在相同的位置，我该如何做？

Answer 1

使用React导航和React Native Tab View教程，您可以重写默认的React Native App.js文件，使其看起来像React Native Tab View的TabViewExample组件。将TabViewExample组件包装在React导航的NavigationContainer组件中。

然后。将TabViewExample的FirstRoute组件包装在Stack.Navigator组件中，将FirstRoute组件的代码移动到一个新组件中，例如FirstRouteScreen，并将另一个组件添加到FirstRoute的组件中，例如DetailsScreen。这两个屏幕将是您希望在保持选项卡视图不变的情况下导航的两个屏幕。向FirstRouteScreen组件添加一个按钮，该按钮允许您导航到DetailsScreen。

下面是它应该是什么样子：

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import { Button, Dimensions, StyleSheet, Text, View } from "react-native";
import "react-native-gesture-handler";
import { SceneMap, TabView } from "react-native-tab-view";

function FirstRouteScreen({navigation}) {
  return (
    <View style={[styles.scene, { backgroundColor: "#ff4081" }]}>
      <Text>First Route</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const FirstRoute = () => (
  <Stack.Navigator initialRouteName="First Route">
    <Stack.Screen
      name="First Route"
      component={FirstRouteScreen}
      options={{ title: "Overview" }}
    />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Navigator>
);

const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: "#673ab7" }]}>
    <Text>Second Route</Text>
  </View>
);

const initialLayout = { width: Dimensions.get("window").width };

const Stack = createStackNavigator();

export default function App() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: "first", title: "First" },
    { key: "second", title: "Second" },
  ]);

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  return (
    <NavigationContainer>
      <TabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={initialLayout}
      />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  scene: {
    flex: 1,
  },
});

参考文献：

Github。satya164/ React - Native - Tab - View : React Native的跨平台选项卡视图组件。https://github.com/satya164/react-native-tab-view。(2020年11月22日访问)

React导航。入门| React导航。https://reactnavigation.org/docs/getting-started。(2020年11月22日访问)

React导航。Hello React导航| React导航。https://reactnavigation.org/docs/hello-react-navigation。(2020年11月22日访问)

在屏幕之间移动| React导航。https://reactnavigation.org/docs/navigating。(2020年11月22日访问)