Question

我正在尝试在本机中设置状态栏颜色。我正在使用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>
        );
    }
}

Answer 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
  }
});

Answer 2

根据演示应用here，您应该使用状态栏的高度视图来避免叠加。与import SpriteKit import GameController class GameScene: SKScene, ReactToMotionEvents { override func didMoveToView(view: SKView) { let appDelegate = UIApplication.shared.delegate as! AppDelegate appDelegate.motionDelegate = self } func motionUpdate(motion: GCMotion) { print("x: \(motion.userAcceleration.x) y: \(motion.userAcceleration.y)") } }之后的代码相似：

StatusBar

Answer 3

使用StatusBar中的react-native提供的常量代替使用Expo特定的代码。 According to the documentation，StatusBar.currentHeight仅适用于Android实现。我尚未验证iOS版本会返回0还是未定义。

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

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

3 个答案: