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组件中添加一个按钮，它将允许您导航到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的跨平台Tab View组件。 https://github.com/satya164/react-native-tab-view。（于2020年11月22日访问）

反应导航。开始使用反应导航。 https://reactnavigation.org/docs/getting-started。（于2020年11月22日访问）

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

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

执行带有react-native-tab-view固定位置的卡片导航？

1 个答案: