Я пытаюсь получить доступ к useTheme() непосредственно из стилей Но пока мое решение не работает. Я не возвращаюсь с ошибкой. Есть ли способ сделать то, что я пытаюсь сделать?
import { StyleSheet } from "react-native";
import { useTheme } from '@react-navigation/native'
export default function () {
const { colors } = useTheme();
const styles = GlobalStyles({ colors: colors })
return styles
}
const GlobalStyles = (props) => StyleSheet.create({
container: {
flex: 1,
backgroundColor: props.colors.backgroundColor,
},
})
Доступ к стилю в компоненте
import React from "react";
import GlobalStyles from "../globalStyles.js"
class Inventory extends React.Component {
render() {
return (
<View style = {globalStyles.container}>
)
}
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания видеоигр, как 2D, так и 3D, с использованием библиотеки Three.js.
У вас есть пара проблем: вы можете использовать хук только внутри хука или функционального компонента. Таким образом, вы можете преобразовать свою глобальную таблицу стилей в хук:
import { StyleSheet } from "react-native";
import { useTheme } from '@react-navigation/native'
const getGlobalStyles = (props) => StyleSheet.create({
container: {
flex: 1,
backgroundColor: props.colors.backgroundColor,
},
});
function useGlobalStyles() {
const { colors } = useTheme();
// We only want to recompute the stylesheet on changes in color.
const styles = React.useMemo(() => getGlobalStyles({ colors }), [colors]);
return styles;
}
export default useGlobalStyles;
Затем вы можете использовать хук, преобразовав ваш компонент класса Inventory в функциональный компонент и используя новый хук useGlobalStyles.
import React from "react";
import useGlobalStyles from "../globalStyles.js"
const Inventory = () => {
const globalStyles = useGlobalStyles();
return (
<View style = {globalStyles.container}>
)
}