如何正确使用 react-native-navigation 库中的 Navigation.showOverlay(...)？答案

【问题标题】：How to use Navigation.showOverlay(...) from react-native-navigation lib correctly?如何正确使用 react-native-navigation 库中的 Navigation.showOverlay(...)？
【发布时间】：2021-03-29 10:29:13
【问题描述】：

如何正确使用 react-native-navigation 库中的 Navigation.showOverlay(...)？

如果我有一个只有一个按钮的屏幕，它可以打开叠加层，而第二个屏幕带有一个应该显示在叠加层中的图像组件。

我已阅读 lib 的操场示例，但我不明白如何将第二个 Screen 作为参数正确传递给 showOverlay 函数。

谁能提供一个简单的例子？谢谢。

App.js：

import React, {} from 'react';
import {View, Button} from 'react-native';
import {Navigation} from 'react-native-navigation';
import OverlayScreen from './OverlayScreen';

const App = () => {

    const onButtonPressed = () => {
        Navigation.showOverlay(OverlayScreen);
    }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button onPress={onButtonPressed()}/>
    </View>
    );
};

export default App;

OverlayScreen.js：

import React, {} from 'react';
import {View, Image} from 'react-native';

const OverlayScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Image 
            source={require('../assets/overlay.png')} 
            style={{ justifyContent: 'center', alignItems: 'center', height: 250, width: 250}}
        />
    </View>
    );
};

export default OverlayScreen;

【问题讨论】：

标签： javascript reactjs react-native wix-react-native-navigation

【解决方案1】：

任何类型的布局都可以显示为叠加层。如果您想显示单个组件，请使用以下布局声明：

Navigation.showOverlay({
  component: {
    name: 'OverlayScreen'
  }
});

确保将该组件也注册为屏幕：

Navigation.registerComponent('OverlayScreen', () => OverlayScreen);

【讨论】：