Question

我需要从“正常” /卡片流导航器打开和关闭模式。我将标签分开，分别在不同的导航器中注销（身份验证流）和主屏幕流。还尝试将模态导航器在其自己的堆栈中分隔开来。

这些是非常基本的应用程序流程要求，令人惊讶的是文档没有任何示例

const AuthScreen = createStackNavigator(
    {
        Landing: { screen: Landing },
        Login: { screen: Login },
        Signup: { screen: Signup },
        Terms: { screen: Terms }
    },
    {
        mode: "modal"
    }
);

const TabNavigator = createBottomTabNavigator(
    {
        Home: { screen: Home },
        Suppliers: { screen: Suppliers },
        Shortlist: { screen: Shortlist },
        "To-Do": { screen: ToDo },
        Inspiration: { screen: Inspiration }
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;

                if (routeName == "Home") {
                    return <Image source={require("../assets/icons/home.png")} />;
                } else if (routeName == "Suppliers") {
                    return <Image source={require("../assets/icons/suppliers.png")} />;
                } else if (routeName == "Shortlist") {
                    return <Image source={require("../assets/icons/shortlist.png")} />;
                } else if (routeName == "To-Do") {
                    return <Image source={require("../assets/icons/todo.png")} />;
                } else if (routeName == "Inspiration") {
                    return <Image source={require("../assets/icons/inspiration.png")} />;
                }
            }
        }),
        tabBarOptions: {
            activeTintColor: "#F19B75",
            inactiveTintColor: "#4A4A4A",
            style: {
                backgroundColor: "white",
                elevation: 0,
                borderTopWidth: 0
            },
            labelStyle: {
                fontSize: 10,
                fontFamily: "Lato-Light"
            }
        }
    }
);

const ModalsStack = createStackNavigator(
    {
        FilterSearch: {
            screen: FilterSearch
        },
        LocationSearch: {
            screen: LocationSearch
        }
    },
    {
        mode: "modal",
        navigationOptions: {
            headerStyle: { backgroundColor: "#fff", elevation: 0, borderBottomWidth: 0 },
            headerTitleStyle: {
                fontWeight: "normal",
                fontFamily: "Lora",
                fontSize: 18
            }
        }
    }
);

const HomeStack = createStackNavigator(
    {
        Tabs: TabNavigator,
        CategoryItem: {
            screen: CategoryItem
        },
        SupplierProfile: {
            screen: SupplierProfile
        }
    },
    {
        navigationOptions: {
            headerStyle: {
                backgroundColor: "white",
                borderBottomWidth: 0,
                elevation: 0
            }
        },
        cardStyle: {
            backgroundColor: "white"
        },
        headerTransitionPreset: "uikit"
    }
);

const AppNavigator = createSwitchNavigator({
    Auth: AuthScreen,
    Home: HomeStack
});

所以我希望能够从CategoryItem屏幕打开FilterSearch。

Answer 1

也许您也可以在HomeStack中添加它？

const HomeStack = createStackNavigator(
  {
    Tabs: TabNavigator,
    CategoryItem: {
      screen: CategoryItem
    },
    SupplierProfile: {
      screen: SupplierProfile
    },
    FilterSearch: {
      screen: FilterSearch,
      mode: 'modal',
      navigationOptions: {
        headerStyle: { backgroundColor: '#fff', elevation: 0, borderBottomWidth: 0 },
        headerTitleStyle: {
          fontWeight: 'normal',
          fontFamily: 'Lora',
          fontSize: 18
        }
      }
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: 'white',
        borderBottomWidth: 0,
        elevation: 0
      }
    },
    cardStyle: {
      backgroundColor: 'white'
    },
    headerTransitionPreset: 'uikit'
  }
);

如何从普通导航器堆栈中打开模式？

1 个答案: