How to change navigation bar on android with RN with expo?

当您使用Expo和React Native开发应用时，调整Android的导航栏（也就是底部的状态栏，包括返回按钮、主页按钮和最近任务按钮的那一栏）可以增强用户体验并使应用更加符合您的设计需求。

在Expo中更改Android导航栏的颜色和样式，可以通过expo-navigation-bar模块来实现。首先，您需要确保已经安装了这个模块。如果尚未安装，可以通过运行下面的命令来安装：

bash
expo install expo-navigation-bar

安装完成后，您可以在您的React Native项目中导入并使用这个模块来更改导航栏的样式。以下是一个基本的示例：

javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as NavigationBar from 'expo-navigation-bar';

export default function App() {
  React.useEffect(() => {
    // 设置导航栏颜色
    NavigationBar.setBackgroundColorAsync('#000000');
    
    // 设置导航栏内容的颜色模式
    NavigationBar.setButtonStyleAsync('light');
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    color: '#000',
  },
});

在这个例子中，setBackgroundColorAsync函数用于设置导航栏的背景颜色，而setButtonStyleAsync函数用于设置导航栏按钮的样式（亮色或暗色）。这些函数都是异步的，它们返回一个Promise，您可以通过.then()和.catch()来处理成功或失败的情况。

通过这种方式，您可以很容易地调整Android导航栏的外观，使其更好地融入整个应用的设计风格。这对于提升用户体验和保持UI的一致性是非常有帮助的。