时间戳

首页 > 解决方案 > Expo，React，小吃模板中的更改状态

react-native - Expo，React，小吃模板中的更改状态

问题描述

我创造了一个新的小吃。

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

我只想做最简单的事情，改变一个状态。所以我检查了复杂的文档，有一个被覆盖的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
    );
  }

所以我需要帮助来改变从头开始的 Snack 模板的状态。

附带问题：如果教程中的App是一个类，而 Snatch App中的函数（）恰好改变了一切，我怎么能遵循 Expo 的教程。

标签： react-nativeexpostatus

解决方案

这是在功能组件中设置状态的简单示例。虽然它没有使用本机反应，但它展示了相同的概念。

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

沙盒

推荐阅读