Question

我正在尝试将我的应用包装在一个容器中，以防止内容进入状态栏下方。我不想编写平台特定的代码；相同的容器应适用于android和ios。

Flutter有一个名为SafeArea的容器，该容器带有道具：顶部，底部，右侧，左侧和子级。在下方，您可以看到如何配置SafeArea以避免出现状态栏。

return new SafeArea(
  top: true,
  bottom: false,
  right: false,
  left: false,
  child: new Stack(
    children: <Widget>[
      new Container(
        color: Colors.green,
      ),
      new Scaffold(
        backgroundColor: const Color(0x00000000),
        appBar: new CustomTabBar(
          pageController: _pageController,
          pageNames: pages.keys.toList(),
        ),
        body: new PageView(
          controller: _pageController,
          children: pages.values.toList(),
        ),
      ),
    ],
  ),
);

我能找到的最接近的本机反应等效项是SafeAreaView，但它不适用于我的Galaxy S7。这是我运行的代码：

import React, { Component } from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
import Navigator from './Navigator'

export default class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <Navigator />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#ddd'
  },
});

除了iphone X以外，我认为它不是为解决状态栏问题而设计的；但是，截至8天前（在撰写本文时），似乎it isn't even working for ios了。

还有其他方法吗？

相当于Flutter的SafeArea容器的本机？

0 个答案: