0

我对 react-native 很陌生。每当我必须使用时，SafeAreaView我必须为相同的组件制作一个单独的.android.js文件，而没有导致重复的安全区域。

是否可以有条件地使用SafeAreaViewwith platform.os？

4

3 回答 3

1

是的，可以将 SafeAreaView 与有条件地用于 Platform.OS。SafeAreaView 仅适用于 ios，但也适用于 android。在我的代码上，SafeAreaView 可以在两个操作系统上工作。如果仅在特定操作系统上需要，则给出条件。

于 2019-08-06T05:29:27.117 回答
1

我有同样的问题。所以我所做的是创建一个名为任何你想要的组件，例如。SafeScrollView.js然后SafeAreaView在该组件中有条件地渲染，然后将子组件传递给该组件。

例如 ：

我SafeScrollView.js喜欢下面：

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

const SafeScrollView = (props) => {
    if (Platform.OS === "ios") {
        return (
            <View style={props.style}>
                {props.children}
            </View>
        );
    }
    return (
        <SafeAreaView style={props.style}>
            {props.children}
        </SafeAreaView>
    )
}

export default SafeScrollView

然后用作SafeScrollView如下组件：

<SafeScrollView>
     // Your component
</SafeScrollView>

现在，在 IOS 中它将呈现普通View组件，如果设备是 android 它将呈现SafeScrollView. 因此，您不必创建单独的文件。

于 2019-08-06T05:39:19.880 回答
0

SafeAreaView 仅支持 ios。因此，您可以对特定操作系统使用条件语句。

于 2019-08-06T05:16:33.547 回答