Использование стилизованных компонентов с нативными элементами React Native вызывает ошибку - PullRequest
Новая
       95

Использование стилизованных компонентов с нативными элементами React Native вызывает ошибку

0 голосов
/ 09 июля 2020

Стилизованные компоненты великолепны. За исключением того, что я не знаю, как я могу использовать их с пользовательскими компонентами RN.

Пример

Предположим, я использую KeyboardAwareScrollView и я хотите, чтобы его стиль можно было многократно использовать с помощью стилизованных компонентов. SafeAreaView работает нормально, но не KeyboardAwareScrollView

В настоящее время я получаю сообщение об ошибке, когда делаю это: 

const KeyboardAwareScrollView = styled.KeyboardAwareScrollView`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const SafeAreaView = styled.SafeAreaView`
  flex: 1;
  background-color: ${Colors.defaultWhite};
`;

const LoginScreen = ({ navigation }) => {
  const dispatch = useDispatch();

  return (
    <SafeAreaView keyboardShouldPersistTaps="handled">
      <KeyboardAwareScrollView
        extraHeight={200}>
        ...
      </KeyboardAwareScrollView>
    </SafeAreaView>
  );
};

Я получаю эту ошибку

Ошибка 

Unhandled JS Exception: TypeError: _styledComponents.default.KeyboardAwareScrollView is not a function. (In '_styledComponents.default.KeyboardAwareScrollView(_templateObject())', '_styledComponents.default.KeyboardAwareScrollView' is undefined)

Кто-нибудь знает обходной путь?

...