Expo，React，更改快餐模板中的状态

Question

我创建了一个新的小吃。

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"
[---]

我只想做最简单的事情，改变状态。因此，我检查了复杂的documentation，使用稍后的render()语法覆盖了render(){...}(?)函数。

我知道我只需要访问this.state变量，所以我导入了[[Component，但仍然无法访问this。

我尝试过这种方式（我看到可以使用构造函数）：

export default function App() {

constructor(){
 this.state.mystate = true;
};

这不起作用，因为
App（）

显然不是Component，所以我尝试扩展它export default function App() extends Component {

我知道这很奇怪，因为App（）是一个函数，但是无论如何我都尝试过，因为所有语法都非常奇怪。无论如何，由于意外的令牌或语法错误，它也不起作用。
我试图创建另一个扩展Component的对象，就像在本教程中看到的那样，它也不起作用。本教程基于另一种不同的语法。
class Blink extends Component {
  componentDidMount() {
    // Toggle the state every second
    setInterval(
      () => this.setState(previousState => ({ isShowingText: !previousState.isShowingText })),
      1000
    );
  }

因此我需要帮助
从零食零食模板更改状态。
侧问：如果教程
App

是类并且在Snatch中，App是碰巧会改变所有内容的function（），我将如何遵循Expo的教程。

Answer 1

这里是在功能组件中设置状态的简单示例。虽然它不使用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>
}

Sandbox