Javascript 尝试将堆栈导航器注入组件时出错，并声明；您应该只渲染一个导航器“；

我有一个例子，其中一个特性包含一个充满信息的平面列表、一个搜索栏、排序按钮和过滤器按钮

对于排序和筛选按钮，我需要从底部拉出一个占据一半屏幕的模式

我理解React Navigation希望我们只创建一个“根”导航器，而所有其他导航器都是从属的；但是，在这种特殊情况下，我非常希望在该页面中明确添加一个导航器，其中用户按下filter按钮，打开modal，按下filter选项，然后让modal导航到其视图范围内的另一个filter子页面，同时在后台维护主页内容和根导航状态

我记得在React Navigation V1.x中实现了这一点，但有人知道如何在V2.x中绕过这一点吗？

我没有使用嵌套的堆栈导航器之类的工具，而是使用内置的react native实现了您的需求

应用程序

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import { MainScreen } from './src/screens/MainScreen';

const RootStack = createStackNavigator(
  {
    MainScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

export default class App extends Component {
  render() {
    return (
      <RootStack />
    );
  }
}

import React，{Component}来自'React'；
从“反应导航”导入{createStackNavigator}；
从“./src/screens/MainScreen”导入{MainScreen}；
const RootStack=createStackNavigator(
{
主屏幕
},
{
导航选项：{
标题：空
}
}
);
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

主屏幕

import { default as React, PureComponent } from 'react';
import { View, Text, Button, Alert, Modal } from 'react-native';

interface Props {

}

interface States {
    num: number;
    isFilterOneVisible: boolean;
    isFilterTwoVisible: boolean;
}

export class MainScreen extends PureComponent<Props, States> {

    state = {
        num: 0,
        isFilterOneVisible: false,
        isFilterTwoVisible: false
    }

    render() {
        return (
            <View
                flex={1}
                justifyContent={'space-evenly'}
                alignItems={'center'}
            >
                <Text style={{ fontSize: 50 }}>{this.state.num}</Text>

                <Button
                    title={'CHANGE STATE'}
                    onPress={() => {
                        this.setState((prevState: States) => ({
                            num: prevState.num + 1
                        }));
                    }}
                />


                {/* Search */}
                <Button
                    title={'Search'}
                    onPress={() => {
                        Alert.alert('Search', 'Search clicked');
                    }}
                />

                {/* Sort*/}
                <Button
                    title={'Sort'}
                    onPress={() => {
                        Alert.alert('Sort Clicked', 'Sort clicked')
                    }}
                />


                <Button
                    title={'Filter'}
                    onPress={() => {
                        this.setState({
                            isFilterOneVisible: true
                        })
                    }}
                />

                {/* Filter Modal 1*/}
                <Modal
                    visible={this.state.isFilterOneVisible}
                    transparent={true}
                    animationType={'slide'}
                    onRequestClose={() => {
                        this.setState({
                            isFilterOneVisible: false
                        })
                    }}
                >
                    <View
                        flex={1}
                        justifyContent={'flex-end'}
                        backgroundColor={'rgba(0,0,0,0.2)'}
                    >
                        {/* Bottom */}
                        <View
                            justifyContent={'center'}
                            alignItems={'center'}
                            backgroundColor={'white'}
                            height={200}
                        >
                            <Button
                                title={'GO TO NEXT FILTER STATE'}
                                onPress={() => {
                                    this.setState({
                                        isFilterOneVisible: false,
                                        isFilterTwoVisible: true
                                    })
                                }}
                            />
                        </View>


                    </View>
                </Modal>

                {/* Filter Modal Two */}
                <Modal
                    visible={this.state.isFilterTwoVisible}
                    transparent={true}
                    animationType={'slide'}
                    onRequestClose={() => {
                        this.setState({
                            isFilterTwoVisible: false
                        })
                    }}
                >
                    <View
                        flex={1}
                        justifyContent={'flex-end'}
                        backgroundColor={'rgba(0,0,0,0.2)'}
                    >
                        {/* Bottom */}
                        <View
                            justifyContent={'center'}
                            alignItems={'center'}
                            backgroundColor={'white'}
                            height={200}
                        >
                            <Button
                                title={'SET DATA AS 1000'}
                                onPress={() => {
                                    this.setState({
                                        isFilterTwoVisible: false,
                                        num: 1000
                                    })
                                }}
                            />
                        </View>


                    </View>
                </Modal>



            </ View >
        );
    }
}

从'React'导入{默认为React，PureComponent}；
从“react native”导入{视图、文本、按钮、警报、模式}；
界面道具{
}
界面状态{
num：数字；
IsFilterOnVisible:布尔值；
isFilterTwoVisible:布尔值；
}
导出类主屏幕扩展了PureComponent{
状态={
数字：0，
IsFilter可见：false，
isFilterTwoVisible:false
}
render（）{
返回(
{this.state.num}
{
this.setState（（prevState:States）=>({
num:prevState.num+1
}));
}}
/>
{/*搜索*/}
{
Alert.Alert（'Search'，'Search clicked'）；
}}
/>
{/*排序*/}
{
Alert.Alert（'Sort Clicked'、'Sort Clicked'）
}}
/>
{
这是我的国家({
IsFilterOnVisible:true
})
}}
/>
{/*过滤器模式1*/}
{
这是我的国家({
IsFilter可见：false
})
}}
>
{/*底部*/}
{
这是我的国家({
IsFilter可见：false，
isFilterTwoVisible:true
})
}}
/>
{/*过滤器模式二*/}
{
这是我的国家({
isFilterTwoVisible:false
})
}}
>
{/*底部*/}
{
这是我的国家({
isFilterTwoVisible:false，
总数：1000
})
}}
/>
);
}
}

---

注意：代码没有经过优化，并且遵循了一些错误模式，如jsx中的

箭头方法。这只是一个带有工作示例的建议。请随意增强代码并遵循
分而治之的策略；）。完整的源代码可以在
中找到，谢谢，我最终使用了RN模式和水平分页滚动视图。感谢您的详细回复！