一个 React Native 屏幕可以包含在两个不同的堆栈导航器中吗？

Question

是否有任何理由不应将屏幕包含在两个不同的堆栈导航器中？

我希望它在两个堆栈导航器中都有一个平滑的流内页面转换和后退按钮以平滑地返回到上一页。在下面的示例中，ContactScreen 出现了两次：

const StackOne = createStackNavigator({
  About: AboutScreen,
  FAQ: FAQScreen,
  Contact: ContactScreen
});

const StackTwo = createStackNavigator({
  Main: MainScreen,
  Details: DetailsScreen
  Contact: ContactScreen
});

const MainTabs = createBottomTabNavigator({
  TabOne: StackOne,
  TabTwo: StackTwo
});

Answer 1

是的，您可以在不同的堆栈导航器中使用相同的屏幕。按照这个例子：

.js file

import React from 'react';
import { Button, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Button
          title="Go to Settings"
          onPress={() => this.props.navigation.navigate('Settings')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Details: { screen: DetailsScreen },
});

const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen },
  Details: { screen: DetailsScreen },
});

export default createAppContainer(createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
));

一个 React Native 屏幕可以包含在两个不同的堆栈导航器中吗？

Can one React Native screen be included in two different stack navigators?

react-native

react-navigation

stack-navigator

react-native-tabnavigator