3

我有一个关于模态堆栈内的卡片堆栈的问题，如附图所示。

所以，只是重复我想做的事情。我有一个打开绿色模式screen的选项。presentation: 'modal'

在那个绿色模式中，我有一个按钮应该调用一个导航调用，该调用应该显示蓝色screen选项presentation: 'card'和返回绿屏的能力。

在此处输入图像描述

我用WIX的 react-native-navigation 库做了类似的事情，但我不知道是否可以用 react-navigation 来完成。

任何帮助深表感谢。

干杯

4

2 回答 2

4

我找到了这里Nesting navigators描述的解决方案

基本上，我创建了一个ModalStack并在组件中使用了这个堆栈，Screen如下所示。

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { TransitionPresets } from '@react-navigation/stack'

import HomeView from '../screens/HomeView'
import ModalView from '../screens/ModalView'
import CardView from '../screens/CardView'

const RootStack = createNativeStackNavigator()
const ModalStack = createNativeStackNavigator()

const ModalStackView = () => (
  <ModalStack.Navigator
    screenOptions={{
      headerShown: true,
    }}>
    <ModalStack.Screen
      name="modalCard1"
      component={ModalView}
      options={{
        presentation: 'modal'
      }}
    />
    <ModalStack.Screen
      name="modalCard2"
      component={CardView}
      options={{
        presentation: 'card'
      }}
    />
  </ModalStack.Navigator>
)

const Stacks = () => (
  <RootStack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <RootStack.Screen name="home" component={HomeView} />
    <RootStack.Screen
      name="modal"
      component={ModalStackView}
      options={{
        presentation: 'modal'
      }}
    />
  </RootStack.Navigator>
)

export default Stacks

这是带有完整代码的小吃

于 2021-11-03T05:20:45.977 回答
-1

在此处输入图像描述

import React from 'react'
import { Text, View, StyleSheet } from 'react-native'
import Details from './profile-component/Details'
import Box from './profile-component/Box'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import MyPets from '../screens/MyPets'
import MyGallery from '../screens/MyGallery'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

const MyProfile = () => {

    const TabStack = createMaterialTopTabNavigator();

    const icon = <Icon name='pencil-circle' color='#ff8000' size={30} />

    return (
        <View style={styles.container}>
            <View style={styles.subContainer}>
                <View style={styles.header}>
                    <Text>Charlotte Hawrin</Text>
                    {icon}
                </View>
                <Box />
                <Details />
                <View style={styles.tabScreens}>

                </View>
            </View>
            <TabStack.Navigator>
                <TabStack.Screen name='My Pets' component={MyPets} />
                <TabStack.Screen name='My Gallery' component={MyGallery} />
            </TabStack.Navigator>
        </View>

    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        borderTopEndRadius: 25,
        borderTopLeftRadius: 25,
        marginTop: 50
    },
    subContainer: {
        marginTop: 20,
        marginHorizontal: 15
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    tabScreens: {

    }
})

export default MyProfile;

看起来像我的类似项目，但我只使用视图而不是模态，您可以使用和社区模型包。我首先使用 react-native-modals，现在使用普通视图，模态位于 rough.js 文件这里是链接github

并用于快速参考（带导航 6）

于 2021-08-26T08:55:22.717 回答