如何在 React Native 中打造流畅无损的 Modal 弹窗

2024-02-13 05:32:21

前言

在 React Native 应用中，Modal 组件可谓是构建弹窗的不二之选。然而，在 Android 设备上，Modal 弹窗往往会遮挡状态栏，导致界面观感不佳。为了解决这一问题，许多开发者不得不采用侵入式的方法，对 Modal 进行二次封装或修改。但这样的做法不仅繁琐，还容易带来兼容性问题。

今天，我们将介绍一种无侵入式的方法，在 React Native 中将 Modal 上的 Android 状态栏变透明，让你轻松打造流畅无损的 Modal 弹窗。

实现步骤

添加依赖

npm install react-native-screens

修改 App.js

import { createNativeStackNavigator } from 'react-native-screens/native-stack';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Modal" component={ModalScreen} />
    </Stack.Navigator>
  );
};

export default App;

创建 ModalScreen.js

import React, { useEffect, useRef } from 'react';
import { View, Modal, StyleSheet } from 'react-native';

const ModalScreen = () => {
  const modalRef = useRef(null);

  useEffect(() => {
    if (modalRef.current) {
      modalRef.current.setNativeProps({
        statusBarTranslucent: true,
        statusBarBackgroundColor: 'transparent',
      });
    }
  }, []);

  return (
    <Modal ref={modalRef}>
      <View style={styles.container}>
        {/* Modal 内容 */}
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ModalScreen;