1

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

4

1 回答 1

0

使用 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 的组件，例如 DetailsS​​creen。这将是您希望在将选项卡视图保持在同一位置的同时在其间导航的两个屏幕。向 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 日访问）

于 2020-11-23T02:21:50.560 回答