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

Question

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

Answer 1

使用 React Navigation 和 React Native Tab View 教程，您可以重写默认的 React Native App.js 文件，使其看起来像 React Native Tab View 的 TabViewExample 组件。将 TabViewExample 组件包装在 React Navigation 的 NavigationContainer 组件中。
然后。将 TabViewExample 的 FirstRoute 组件包装在 Stack.Navigator 组件中，将 FirstRoute 组件的代码移动到新组件，例如FirstRouteScreen，并将另一个组件添加到 FirstRoute 的组件，例如详情画面。这将是您希望在将选项卡视图保持在同一位置的同时在其间导航的两个屏幕。 向 FirstRouteScreen 组件添加一个按钮，该按钮将允许您导航到 DetailsS​​creen。

它应该是这样的：

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 日访问）

反应导航。入门 |反应导航。 https://reactnavigation.org/docs/getting-started。 （2020 年 11 月 22 日访问）

反应导航。你好反应导航 |反应导航。 https://reactnavigation.org/docs/hello-react-navigation。 （2020 年 11 月 22 日访问）

在屏幕之间移动 |反应导航。 https://reactnavigation.org/docs/navigating。 （2020 年 11 月 22 日访问）