按下按钮时打开覆盖组件

Question

我正在使用react-native-element Overlay 组件。我要做的是在工具栏的标题上定义一个按钮，当单击该按钮时，会从工具栏的底部打开覆盖。我试过了：

我的自定义组件包装了 Overlay 组件：

import {Overlay} from 'react-native-elements';
...
const MyOverlay = ({isVisible}) => {
   return (
    <View>
      <Overlay isVisible={visible} onBackdropPress={true}>
        <Text>Hello from Overlay!</Text>
      </Overlay>
    </View>
  );
}

在我的一个屏幕中，我在标题栏（工具栏）上显示了一个按钮，在我尝试打开MyOverlay 的按钮的onPress 回调中：

const MyScreen = ({route, navigation}) => {
   ...
   navigation.setOptions({
      headerTitle: props => (
        <Button
          title="open"
          color="#f194ff"
          style={{width: 50, height: 50}}
          onPress={() => <MyOverlay isVisible={true} />}
        />
      ),
    });
   ...

}

当我运行该应用程序时，该按钮显示在工具栏上，但单击它时，没有任何反应。

我的问题：

1. 按下该按钮时如何打开MyOverlay？
2. 如何确保覆盖视图从工具栏底部打开？

Answer 1

试试这个

定义状态

const MyScreen = ({route, navigation}) => {

const [visible, setVisible] = useState(false);

  const toggleOverlay = () => {
    setVisible(!visible);
  };

....

在主返回函数中添加overylay

return (
.....
<MyOverlay isVisible={visible} />
)

设置按钮按下时的状态

<Button
          title="open"
          color="#f194ff"
          style={{width: 50, height: 50}}
          onPress={() => toggleOverlay()}
        />