React-native android 工具栏位于状态栏下方答案

【问题标题】：React-native android toolbar going below status barReact-native android 工具栏位于状态栏下方
【发布时间】：2017-10-21 16:47:46
【问题描述】：

我正在尝试在本机反应中设置状态栏颜色。我使用react-native-material-ui 作为工具栏组件。我的问题是，每当我设置状态栏颜色时，工具栏都会在状态栏上下移动。
请看下面的截图：

我正在使用以下内容：

const uiTheme = {
    palette: {
        primaryColor: COLOR.green500
    },
    toolbar: {
        container: {
            height: 56
        }
    }
};

export default class RecentChatListScreen extends Component
{
    render() {
        return (
            <ThemeProvider uiTheme={uiTheme}>
                <View>
                    <StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent />
                    <Toolbar
                        leftElement="menu"
                        centerElement="Hola"
                        searchable={{
                            autoFocus: true,
                            placeholder: 'Search your chats',
                        }}
                        onLeftElementPress={() => this.props.navigation.navigate('DrawerOpen')}
                    />
                    <Text>List of recent chats.</Text>
                    <Button onPress={() => this.props.navigation.navigate('Chat')} title="Go to Chat"/>
                </View>
            </ThemeProvider>
        );
    }
}

【问题讨论】：

您是否尝试将工具栏、文本和按钮包装在另一个视图中？
@Srijith 是的，我做到了，但不幸的是什么也没发生。
有人能告诉我为什么它被否决了吗？如果问题无法理解，我很乐意改进。
你的 uiTheme 是什么？
@Srijith 更新问题

标签： react-native react-native-android material-ui

【解决方案1】：

如果有人遇到 expo 问题，只需在 App 组件的根视图中添加“paddingTop: Expo.Constants.statusBarHeight”

render() {
    return (
      <View style={styles.container}>
      //other components 
      </View>)
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    paddingTop: Expo.Constants.statusBarHeight
  }
});

【讨论】：

【解决方案2】：

不要使用特定于 Expo 的代码，而是在 StatusBar 中使用 react-native 提供的常量。 According to the documentation、StatusBar.currentHeight 仅提供给 Android 实现。我还没有验证 iOS 版本返回 0 还是 undefined。

const uiTheme = {
    palette: {
        primaryColor: COLOR.green500
    },
    toolbar: {
        container: {
            height: 56,
            paddingTop: StatusBar.currentHeight || 0
        }
    }
};

【讨论】：

【解决方案3】：

根据演示应用程序here，您应该使用状态栏高度的视图来避免覆盖。就像下面StatusBar之后的代码：

<View style={{ backgroundColor: COLOR.green500, height: 24 }} />

【讨论】：

好的，我会试试这个并通知。顺便说一句，在 IOS 上呢？
它工作正常，但我如何针对 IOS 和 iPhone X 进行调整？