我如何使Expo Image Picker Dark主题

Question

这是我当前的图像拾取器功能，

const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
  
    })
    
    console.log(result)

    if (!result.cancelled) {
      setImage(result.uri)
    }
  }

我正在尝试使弹出画廊以黑暗为主题。我该怎么做？

Answer 1

React Navigation具有一个理想选择的主题组件！您可以使用他们的默认主题，也可以根据需要自定义！查看详细信息在这里。

在项目中添加主题实际上非常容易。假设您已经在使用React-Navigation，那么您甚至不需要下载额外的依赖项。

创建一个新的.js文件，称为您想要的任何内容，典型名称将为theme.js。粘贴内部：

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
  },
};

此主题组件有很多道具可供选择，因此请务必检查一下。

这是文档中的一个示例：

const MyTheme = {
  dark: false,
  colors: {
    primary: 'rgb(255, 45, 85)',
    background: 'rgb(242, 242, 242)',
    card: 'rgb(255, 255, 255)',
    text: 'rgb(28, 28, 30)',
    border: 'rgb(199, 199, 204)',
    notification: 'rgb(255, 69, 58)',
  },
};

现在，对于黑暗模式部分，React-Navigation已内置为主题，默认和黑暗：import {defaultTheme，darktheme，darktheme} from'@react-navigation/naters';>

在导航容器内部，现在您要做的就是调用您要使用的主题：

import { useColorScheme } from 'react-native';
import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from '@react-navigation/native';

export default () => {
  const scheme = useColorScheme();

  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* content */}
    </NavigationContainer>
  );
};

这是从轻度和黑暗主题开始的绝佳方法。一旦掌握了它，您也可以实现状态，以使您的应用在默认模式和黑暗模式之间切换！