使用类组件初始化 react-native 应用程序答案

【问题标题】：Initialize react-native application with class components使用类组件初始化 react-native 应用程序
【发布时间】：2020-01-08 12:22:11
【问题描述】：

我刚刚安装了create-react-native-app 并创建了一个。我可以看到app 是那里的一个函数

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

我知道 React 中提供了函数式组件和类组件。现在我想用类组件创建应用程序。有人可以建议怎么做吗？

【问题讨论】：

互联网上有大量关于如何使用基于类的组件的优质资源。有什么不明白的具体点吗？如果没有，您可以先学习文档。
很抱歉不清楚。我只是感兴趣创建类组件骨架的命令是什么。我试过 create-react-native-app 来创建功能性的。
学习随机反应教程并在编辑器中编写它需要的几行代码供您选择有什么困难？我看不出你如何需要一个命令。甚至在开发小型 React 应用程序时，您无论如何都需要自己编写所有组件，包括您在某些时候肯定需要的基于类的组件。没有命令。 create-react-native-app 这样做的唯一原因是帮助您确定您的设置是否正常工作，而无需先创建组件。通常你会在下一步删除那个。
我认为这里应该类似于来自 Angular 的ng generate component。现在很清楚，没有。

标签： reactjs react-native components create-react-native-app

【解决方案1】：

对于来自重度面向对象背景的人来说，与基于函数的组件相比，基于类的组件会让他们更快地跳入reactjs。

这是类组件的一些基本骨架：

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

export default class App extends React.PureComponent {
  constructor() {
    // Where you initialize some data
  }


  componentDidMount() {
    // Lifecycle method when your component is mounted
  }

  componentWillUnmount() {
    // Lifecycle method when your component is unmounted
  }

  _handleOnButtonPress = () => {
    // Handler when your button is pressed
  }


  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._handleOnButtonPress}>
          <Text>Open up App.tsx to start working on your app!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

这里还有一个reference 来比较类和功能组件。干杯！

【讨论】：

【解决方案2】：

这是给你的代码：

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount = () => {
    // initial method
  };

  render() {
    return (
      <View>
        <Text>Test</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

export default App;

【讨论】：

【解决方案3】：

除非您在类中使用状态，否则无需将其设为类

【讨论】：