Блог

Главная - Вопросы по программированию - React Native: undefined не является объектом (вычисление ‘_useContext.width’)

React Native: undefined не является объектом (вычисление ‘_useContext.width’)

#react-native #use-context

#реагировать -родной #использовать-контекст

Вопрос:

Я хочу создать повторно используемый код для разных размеров экрана. Я использую createContext API, чтобы мне не приходилось переписывать код на другом экране. Я получил эту ошибку

 null is not an object (evaluating '_useContext.width)

Кстати, я использую useWindowDimensions() из react native https://reactnative.dev/docs/usewindowdimensions . Вот код.

 theme.js

import React, {createContext, useState, useEffect} from 'react';
import {useWindowDimensions} from 'react-native';

export const WindowContext = createContext();

export const DefaultTheme = ({children}) => {
  const WIDTH = useWindowDimensions().width;
  const HEIGHT = useWindowDimensions().height;

  const [width, setWidth] = () => useState(WIDTH);
  const [height, setHeight] = () => useState(HEIGHT);

  useEffect(() => {
    const handleSize = () => setWidth(WIDTH);
    setHeight(HEIGHT);
    window.addEventListener('resize', handleSize);
    return () => window.removeEventListener('resize', handleSize);
  }, []);

  return (
    <WindowContext.Provider
      value={{
        width: width,
        height: height,
      }}>
      {children}
    </WindowContext.Provider>
  );
};

и я хочу реализовать код в моем компоненте button

 button.js

import React, {useContext} from 'react';
import {WindowContext} from '../../theme';

const Button = ({buttonTitle, textColor, ...rest}) => {
  const {width} = useContext(WindowContext);

  return (
    <>
      {width < 376 ? (
        <DefaultButton height="50" {...rest}>
          <ButtonText color={textColor}>{buttonTitle}</ButtonText>
        </DefaultButton>
      ) : (
        <DefaultButton height="60" {...rest}>
          <ButtonText color={textColor}>{buttonTitle}</ButtonText>
        </DefaultButton>
      )}
    </>
  );
};

export default Button;

Комментарии:

1. вы деформировали свое приложение внутри контекста? может быть, как <DefaultTheme><App/></DefaultTheme>

2. О, я забыл об этом! Извините. Спасибо, сэр!

Ответ №1:

вы можете получить ширину экрана следующим образом:

 import {Dimensions} from 'react-native';

const { width: screenWidth } = Dimensions.get('window')
Метки: