React Native 狀態不會改變

Question

我正在開發我的第一個游戲應用程序。

我想要做的是將 GreenF 傳遞給 Green 組件。

但狀態不會改變。 我需要 GreenF 在函數 play() 中隨時更改；

這只是我代碼的開始，所以沒有什么是完整的，但僅供您理解。

    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 組件的更現代的方式。

當您的狀態增長並需要在樹中的許多不同組件之間共享時，您可能需要查看 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