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;

如何避免不变的冲突：必须在<Text>组件内呈现文本字符串？我刚接触本机

1 个答案: