Expo、React、在小吃模板中改变状态

Question

我创建了一个新的 Snack。

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
    );
  }

所以我需要帮助从 scratch Snack 模板更改状态。

附带问题：如果在教程中 App 是 class 并且在 Snatch App[= 中，我如何遵循 Expo 的教程43=] 是一个 function() ，它恰好改变了一切。

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

Expo、React、在小吃模板中改变状态

Expo, React, Change State within a Snack Template

status

react-native

expo