Как избежать неизменного нарушения: текстовые строки должны отображаться в компоненте <Text>?Я новее реагировать родной

Question

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


const Header = () => {
  const { textStyle, viewStyle } = styles;

       return (
         <View styles={viewStyle}>

         <Text styles={textStyle}>Albums!</Text>

         </View>
       );
};

const styles = {
viewStyle: {
backgroundColor: '#F8F8F8'
  },
  textStyle: {
  fontSize: 200
}
};

export default Header;

как избежать нарушения инварианта: текстовые строки должны отображаться внутри компонента? Я новее реагировать-родной

Answer 1

Попробуйте рефакторинг вашего кода

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class Header extends Component 
  render() {
      return (
          <View styles={styles.viewStyle}>
             <Text styles={styles.textStyle}>Albums!</Text>
          </View>
      );
    }
  }

  const styles = StyleSheet.create({
     viewStyle: {
        backgroundColor: '#F8F8F8'
     },
    textStyle: {
       fontSize: 200
    }
  });
export default Header;