如何修改Android内嵌网页应用的URL栏颜色（Expo/React Native）

你的问题核心在于：网页端的theme-color meta标签仅对独立的Chrome浏览器环境生效，而应用内嵌的WebView的URL栏属于React Native/Expo应用的原生UI组件，不受网页内容控制，因此需要在React Native/Expo端进行配置，具体分两种情况处理：

1. 自定义实现URL导航栏（推荐） #

如果你的URL栏是自己在WebView上方添加的自定义UI（类似Gmail的内嵌链接栏），直接在React Native样式中设置背景色即可：

import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { WebView } from 'expo-webview';

export default function EmbeddedWebScreen() {
  const webUrl = "https://your-target-url.com";

  return (
    <View style={styles.container}>
      {/* 自定义URL栏 */}
      <View style={styles.urlBar}>
        <TouchableOpacity>
          {/* 返回按钮 */}
          <Text>←</Text>
        </TouchableOpacity>
        <Text style={styles.urlText}>{webUrl}</Text>
      </View>
      {/* 内嵌网页 */}
      <WebView source={{ uri: webUrl }} style={styles.webView} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  urlBar: {
    backgroundColor: "#00f", // 这里设置你需要的自定义颜色
    paddingHorizontal: 12,
    paddingVertical: 8,
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
  },
  urlText: { flex: 1, fontSize: 14, color: "#fff" },
  webView: { flex: 1 },
});

2. 若使用第三方带导航的WebView组件 #

如果是用了第三方封装的带内置URL栏的WebView库，通常这类库会提供配置属性来修改栏的颜色，比如查找组件文档中的navigationBarStyle、toolbarColor等类似属性，直接传入自定义颜色值即可。

补充说明 #

网页端的theme-color仅能影响浏览器的地址栏/状态栏，无法作用于应用内的原生UI组件。如果需要同步网页内容和应用UI的颜色，你可以通过WebView的onMessage方法让网页向RN端发送颜色值，再动态修改URL栏的样式。

内容的提问来源于stack exchange，提问作者JP Strydom