Question

我正在开发我的第一个游戏应用程序。

我要做的是将GreenF传递给Green组件。

但是状态不会改变。我需要在函数play（）中随时更改GreenF

这只是我代码的开始，所以没有什么比这更完整的了，只是为了您的理解。

    import React, {Component} from 'react';
    import {StyleSheet, Text, View,TouchableOpacity, Button} from 'react-native';
    import Green from './components/Green.js'

     constructor (props){
    super(props);
    this.state = {
      greenF: false,
      score: 0,
      seq: [1,2,3,1,4],
      playerSeq: [],
      round: 1,
    }
  }

  play() {
    this.setState({ greenF: true });
  }

  render(){
    return (
      <View>
        <Button 
        title='start' 
        color='black' 
        onPress={this.play}>

        </Button>
        <Green greenFlash={this.state.greenF}> </Green>
      </View>
    );
  }
}

Answer 1

您可以使用react-native-community提供的AsyncStorage。这是一个永久性存储，您可以在其中设置和获取键值存储。引用此：https://github.com/react-native-community/async-storage

无论哪种方式，您都可以将redux用于全局状态管理。

Answer 2

首先：为什么要寻找一种不使用状态的方法？状态将是处理此信息的“反应方式”，尤其是因为我假设您要在值更改后重新呈现组件。

但是可以，您可以在渲染函数之外甚至在组件类之外声明变量。

现在，当您开始学习react-native时，可以看看功能组件和react钩子（例如state的useState钩子），因为这是编写React组件的更现代的方式。

当状态增长并且需要在树中的许多不同组件之间共享时，您可能希望查看反应上下文甚至是状态管理库（例如redux）。

修改

我还将添加组件的功能组件版本，以说明如何使用挂钩管理状态，对我来说，这很容易，因为状态更新要简单得多。注意：功能仍然只是您的示例要尝试的操作。

import React, { useState } from 'react'
import { StyleSheet, Text, View, TouchableOpacity, Button } from 'react-native'
import Green from './components/Green.js'

const App = props => {
    let score // user score
    let seq = [] //order of playing colors
    let playerSeq = [] //order of user pressing the colors
    let round // round number
    let ok //does the user pressed right
    let win
    let compTurn

    const [ greenF, setGreenF ] = useState(false) // [value, setter] = useState(initial)

    const play = () => {
        seq = [ 1, 2, 3, 1, 4 ] //just for test
        compTurn = true
        round = 1
        for (var i = 0; i < round; i++) {
            switch (i) {
                case 1:
                    setGreenF(true) // triggers rerender (after all state changes are done)
                    break
                case 2:
                    //tbchanged
                    break
                case 3:
                    //tbchanged
                    break
                case 4:
                    //tbchanged
                    break
            }
            compTurn = false
        }
    }

    return (
        <View>
            <Button title="start" color="black" onPress={play} />
            <Green greenFlash={greenF}> </Green>
        </View>
    )
}

export default App

React Native状态不会改变

2 个答案: