React Native 状态不会改变

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 时，不妨看看函数式组件和 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

Answer 2

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

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