React native 展示、反应、更改零食模板中的状态

我创造了一种新的零食

import * as React from 'react';
import { Text, View, StyleSheet, Button, Alert } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

// -------------------------------------------------------------------------------

export default function App() {
  return (
    <View style={styles.container}>
      <CIM_Header />
      <View style={styles.fixToText}>
        <Button
          title="Left button"
[---]

这不起作用，因为App（）显然不是一个组件，所以我尝试扩展它

export default function App() extends Component {

我知道这很奇怪，因为App（）是一个函数，但我还是尝试了，因为所有的语法都很奇怪。无论如何，由于意外的标记或语法错误，它也无法工作

正如我在教程中看到的，我尝试创建另一个对象扩展组件，但也不起作用。本教程基于另一种不同的语法

class Blink extends Component {
  componentDidMount() {
    // Toggle the state every second
    setInterval(
      () => this.setState(previousState => ({ isShowingText: !previousState.isShowingText })),
      1000
    );
  }

因此，我需要帮助从零开始更改零食模板的状态

---

附带问题：如果教程应用程序中有一个类，而抓取应用程序中有一个函数（）碰巧改变了一切，那么我如何理解世博会的教程。

下面是一个设置函数组件状态的简单示例。虽然它没有使用react native，但它展示了相同的概念

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [hidden, setHidden] = useState(false);
  return <div>
    <button onClick={() => {
      setHidden(!hidden);
    }}>Click me</button>
    { !hidden ? <span>Maybe visible?</span> : null }
    </div>
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[hidden，setHidden]=useState（false）；
回来
{
setHidden（！hidden）；
}}>点击我
{！隐藏？可能可见？：null}
}

---

下面是一个使用

useState

管理状态的功能组件的好例子：这正是我想要的。它提出了很多问题：我应该从哪里了解useState（），组件和功能组件的区别是什么。。。但是你已经给了我一些关于在哪里搜索教程的重要提示。谢谢你，Evan。就你能达到的目标而言，函数组件和类组件之间没有太大区别，但是生态系统肯定正在向函数方面发展，所以如果你刚刚开始，我会说坚持下去。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [hidden, setHidden] = useState(false);
  return <div>
    <button onClick={() => {
      setHidden(!hidden);
    }}>Click me</button>
    { !hidden ? <span>Maybe visible?</span> : null }
    </div>
}