Question

在我的应用程序的主屏幕上，我实现了一个Button，我想启动一个弹出窗口（react-native-popup-dialog），该窗口呈现第二个堆栈导航器。通过使弹出窗口和导航器透明而不完全填充屏幕，我仍然希望在后台看到主屏幕。

这基本上可以工作，但是：

我收到消息：“您应该只在应用程序中显式遇到一个导航器，而其他导航器应通过将其包含在该导航器中来呈现。完整详细信息：https://reactnavigation.org/docs/en/common-mistakes.html#explicitly-rendering-more-than-one-navigator”
这很慢。
一个导航器无法导航到另一个导航器的屏幕，例如“第三屏”。（在这种情况下，我会先关闭弹出窗口。）
关闭后，弹出导航器不会恢复为默认设置。我将其重新打开到与关闭时相同的屏幕。

我已经重新排列了堆栈，因此基本的createStackNavigator被createSwitchNavigator取代了，但是开始时仍然是相同的警告。

这是我的代码：

//————StackFile———————

export const BeginningStack = createStackNavigator(
    {
        InitialisingData: InitialisingDataScreen,
        HomeLoggedIn: HomeLoggedInScreen,
        ThirdScreen: ThirdScreen,
    },
    {
        initialRouteName: 'InitialisingData',
    }
);

export const StoryStack = createStackNavigator(
    {       
        Stories: StoriesScreen,
        StoryDetails: StoryDetailsScreen,
    },
    {
        initialRouteName: 'Stories',
        cardStyle: {
            backgroundColor: "transparent"
        },
        transitionConfig: () => ({
            containerStyle: {}
        }), //Relevant to make the navigator transparent on iOS
    }
);

export const AppNavigator = createSwitchNavigator({
    Root: BeginningStack,
    Stories: StoryStack,
});

//————AppFile———————

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

//————HomeScreen———————

import PopupDialog from 'react-native-popup-dialog';

export default class HomeLoggedInScreen extends React.Component {

  render() {
    return (
    <View
        style={{
            flex: 1,
        }}
    >

        <PopupDialog
            dialogStyle={{
                backgroundColor: "transparent",
            }}
            width={0.95}
            height={0.85}
            ref={(popupDialog) => { this.popupDialogStories = popupDialog; }}
        > 
            <View style={{
                flex: 1,
                backgroundColor: "transparent",
                }}
            >
                <StoryStack />
            </View>
        </PopupDialog>

        <View
            style={{
                flex: 1
            }}>
            <Text style={{
                fontSize: 150,
                color: "red"
            }}>
                Sample background
            </Text>
        </View>

        <TouchableOpacity onPress={this.popupDialogStories.show()}>
            <Text>Open new navigation in popup</Text>
        </TouchableOpacity>
    </View>

    );
  }
}

所以我的问题本质上是：这真的有效吗？我监督了一些基本的事情吗？

通过弹出窗口渲染多个导航器

0 个答案: