Как я могу использовать Reaction-native-Response-размеры с отдельной таблицей стилей - PullRequest
Новая
       5

Как я могу использовать Reaction-native-Response-размеры с отдельной таблицей стилей

0 голосов
/ 06 ноября 2019

Я новичок в React и React Native. У меня есть таблица стилей с именем SiteStyle.js и компонент npm с именем реагировать-родной-реагировать-измерения . Я пытаюсь использовать хуки, включенные с ними в мою таблицу стилей, но получаю сообщение об ошибке «Недопустимый вызов хука. Хуки могут быть вызваны только внутри тела компонента функции ...» Как мне вызвать хук вмоя отдельная таблица стилей?

SiteStyle.js 

import { StyleSheet } from 'react-native'
import { useResponsiveFontSize } from "react-native-responsive-dimensions";

export default StyleSheet.create({
 homeCardTitle: {
    color: '#ffffff', 
    fontSize: useResponsiveFontSize(1)
  },
  ...
})

Я использую таблицу стилей в файле с именем Home.js, который выглядит следующим образом: 

import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import { Card } from 'react-native-elements'

import SiteStyle from '../SiteStyle';

class Home extends React.Component {
  render() {    
    return (
      <View style={SiteStyle.pageContent}>
        <ScrollView style={SiteStyle.mainContent} contentContainerStyle={SiteStyle.mainContentContainer}>
          <View style={SiteStyle.homeCardContainer}>
              <Card 
                title={
                  <View style={SiteStyle.homeCardHeader}>
                    <View>
                      <Text style={SiteStyle.homeCardTitle}>Heading</Text>
                    </View>
                  </View>}
                containerStyle={SiteStyle.homeCard}>
                <View style={SiteStyle.homeCardBody}>
                  <View>
                    <Text style={SiteStyle.homeCardBodyText}>
                      Body Text Here
                    </Text>
                  </View>
                </View>
              </Card>
            </View>     
        </ScrollView>
      </View>
    );
  }
}

export default Home;
...