重口难调，如果APP的主色调可以自定义，一定程度上就解决了这个问题。
实现思路- 每个组件之间共享同一个color变量，当用户自定义主题颜色的时候，所有的页面主色调一起发生变化。并且把用户设置的颜色保存到本地存储之中。
- APP每次启动的时候，从本地存储中获取主题的颜色信息。
效果如下：
js/context/ThemeContext.js
/* eslint-disable prettier/prettier */
import React, {useState,useEffect, createContext} from 'react';
import AsyncStorage from '@react-native-community/async-storage';
export const ThemeContext = createContext();
export const ThemeProvider = props => {
const [backgroundColor,setBackgroundColor] = useState('#1677ff'); //#1677ff
useEffect(()=>{
const queryThemeConfig = async () => {
try {
const cacheBackgroundColor = await AsyncStorage.getItem('@backgroundColor');
if(cacheBackgroundColor!=null){
setBackgroundColor(cacheBackgroundColor);
}
} catch (e) {
// saving error
}
};
queryThemeConfig().then(r => void(0) );
},[]);
return (
{props.children}
);
};
js/screen/SettingsScreen.js
/* eslint-disable prettier/prettier */
import React, { useState,useContext } from "react";
import { FlatList, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity } from "react-native";
import {ThemeContext} from '../context/ThemeContext';
import AsyncStorage from '@react-native-community/async-storage';
const themeData = [
{
text: 'Default',
color: '#1677ff',
},
{
text: 'Red',
color: '#F44336',
},
{
text: 'Pink',
color: '#E91E63',
},
{
text: 'Purple',
color: '#9C27B0',
},
{
text: 'DeepPurple',
color: '#673AB7',
},
{
text: 'Indigo',
color: '#3F51B5',
},
{
text: 'Blue',
color: '#2196F3',
},
{
text: 'LightBlue',
color: '#03A9F4',
},
{
text: 'Cyan',
color: '#00BCD4',
},
{
text: 'Teal',
color: '#009688',
},
{
text: 'Green',
color: '#4CAF50',
},
{
text: 'LightGreen',
color: '#8BC34A',
},
{
text: 'Lime',
color: '#CDDC39',
},
{
text: 'Yellow',
color: '#FFEB3B',
},
{
text: 'Amber',
color: '#FFC107',
},
{
text: 'Orange',
color: '#FF9800',
},
{
text: 'DeepOrange',
color: '#FF5722',
},
{
text: 'Brown',
color: '#795548',
},
{
text: 'Grey',
color: '#9E9E9E',
},
{
text: 'BlueGrey',
color: '#607D8B',
},
{
text: 'Black',
color: '#000000',
}
];
const Item = ({ item, onPress, style }) => (
{item.text}
);
const SettingScreen = () => {
const [backgroundColor,setBackgroundColor] = useContext(ThemeContext);
const saveThemeConfig = async (color) => {
try {
await AsyncStorage.setItem('@backgroundColor', color);
} catch (e) {
// saving error
}
};
const renderItem = ({ item }) => {
const backgroundColor = item.color;
return (
{
setBackgroundColor(item.color);
saveThemeConfig(item.color);
}}
style={{ backgroundColor }}
/>
);
};
return (
item.text}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
padding: 20,
marginVertical: 0,
marginHorizontal: 0,
},
title: {
fontSize: 22,
color: '#ffffff',
},
});
export default SettingScreen;
js/navigation/TabNav.js
/* eslint-disable prettier/prettier */
import React, {useContext} from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import SchoolScreen from '../screen/SchoolScreen';
import HomeScreen from '../screen/HomeScreen';
import MessageScreen from '../screen/MessageScreen';
import SettingsScreen from '../screen/SettingsScreen';
import AntDesign from 'react-native-vector-icons/AntDesign';
import {ThemeContext} from '../context/ThemeContext';
export default function Navigation({colorScheme}) {
const [backgroundColor, setBackgroundColor] = useContext(ThemeContext);
return (
({
tabBarIcon: ({focused, color, size}) => {
if (route.name === 'index') {
return ;
} else if (route.name === 'school') {
return ;
} else if (route.name === 'message') {
return ;
} else if (route.name === 'setting') {
return ;
}
},
})}
tabBarOptions={{
activeTintColor: backgroundColor,
}}
>
{title: '首页', headerMode: 'none'}}
/
{title: '校园'}}
/
{title: '消息'}}
/
{title: '设置'}}
/
);
}
const Tab = createBottomTabNavigator();
const TabStack = createStackNavigator();
function HomeNavigator() {
const [backgroundColor, setBackgroundColor] = useContext(ThemeContext);
return (
{
headerTitle: '首页',
headerLeft: null,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: backgroundColor,
},
headerTitleStyle:{
color: '#fff',
}
}}
/
);
}
function SchoolNavigator() {
const [backgroundColor, setBackgroundColor] = useContext(ThemeContext);
return (
{
headerTitle: '校园',
headerLeft: null,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: backgroundColor,
},
headerTitleStyle:{
color: '#fff',
}
}}
/
);
}
function MessageNavigator() {
const [backgroundColor, setBackgroundColor] = useContext(ThemeContext);
return (
{
headerTitle: '消息',
headerLeft: null,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: backgroundColor,
},
headerTitleStyle:{
color: '#fff',
}
}}
/
);
}
function SettingsScreenNavigator() {
const [backgroundColor, setBackgroundColor] = useContext(ThemeContext);
return (
{
headerTitle: '主题设置',
headerLeft: null,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: backgroundColor,
},
headerTitleStyle:{
color: '#fff',
}
}}
/
);
}
App.js(入口文件)
import React from 'react';
import {
StyleSheet,
SafeAreaView,
StatusBar,
useColorScheme,
} from 'react-native';
import Navigation from './js/navigation';
import {
DarkTheme,
DefaultTheme,
NavigationContainer,
} from '@react-navigation/native';
import {ThemeProvider} from './js/context/ThemeContext';
const App = () => {
const colorScheme = useColorScheme();
return (
);
};
export default App;
import {ThemeProvider} from './js/context/ThemeContext';
const App = () => { const colorScheme = useColorScheme(); return ( ); };
绿色部分为需要增加的部分。
项目源码下载：
https://download.csdn.net/download/lxyoucan/12910406
视频教程地址：
https://www.bilibili.com/video/BV1rT4y1c7Jp
