SafeAreaView 无法在模态屏幕内工作

Question

我有一个模态屏幕（

presentation: 'modal'

），里面有一个可滚动的

FlatList

。问题是我无法实现底部与透明底部安全区域的间距。我使用

SafeAreaView

中的

react-native-safe-area-context

。

我尝试了很多解决方案，但实际上并没有奏效。到目前为止我已经尝试过：

1. 使用

   SafeAreaView

   换行屏幕内容；
2. 用

   SafeAreaView

   ;
包装 FlatList
3. 将

   style={ { paddingBottom: 50 } }

   添加到 FlatList；
4. 将

   contentContainerStyle={ { paddingBottom: 50 } }

   添加到 FlatList；
5. 将

   ListFooterComponent={ <SafeAreaView edges={ ['bottom'] } forceInset={ { bottom: 'always' } } /> }

   添加到 FlatList；
6. 还尝试使用 ScrollView 而不是 FlatList。

截图：

我要么在屏幕底部有一个滚动条，但列表具有正确的间距：

或

底部有一个边距，然后滚动条看起来不错（它滚动到红线）：

如果我将它与本机 iOS 应用程序进行比较，它们的行为正是我想要的 - 滚动条滚动到安全区域，并且当我滚动时底部是透明的：

屏幕组件：

return (
        <SafeAreaView forceInset={ { top: 'never', bottom: 'always' } }>
            <View style={ styles.container }>
                <FlatList
                    style={ { marginBottom: 0 } }
                    // showsVerticalScrollIndicator={ false }
                    // contentInsetAdjustmentBehavior="automatic"
                    numColumns={ 4 }
                    // ListFooterComponent={ <SafeAreaView edges={ ['bottom'] } mode="margin" forceInset={ { bottom: 'always' } } /> }
                    // contentInset={ { bottom: 1 } }
                    // contentContainerStyle={ [{paddingBottom: 30 }] }
                    data={ [] }
                    renderItem={ ({ item }) => {
                        return renderCategory(item);
                    } }
                />

            </View>
        </SafeAreaView>
    );

导航器组件：

return (
        <Stack.Navigator initialRouteName="DashboardStack">
            <Stack.Group screenOptions={ {
                headerLargeTitle: false,
                headerShown: true,
                headerShadowVisible: false,
                presentation: 'modal'
            } }>
                <Stack.Screen
                    name="CategoryModal"
                    component={ CategoryModal }
                    options={ {
                        title: 'Categories',
                        contentStyle: {
                            backgroundColor: '#ffffff'
                        }
                    } }
                />
            </Stack.Group>
        </Stack.Navigator>
    );

Answer 1

今天遇到这个并遇到这个问题。

您可能需要将模态框包装在其自己的 SafeAreaContextProvider 中。

请参阅此处的文档：https://www.npmjs.com/package/react-native-safe-area-context#safeareaprovider

您应该在应用程序根组件中添加 SafeAreaProvider。 你可以 需要将其添加到其他地方，例如模态的根和路线 使用反应本机屏幕。

就我而言，我使用的是react-native-paper中的Portal，并添加直接嵌套在Portal下的SafeContextProvider解决了我的问题。在您的示例中，包装 Stack.Screen 所服务的组件可能已经达到了目的。