Реагировать Родное состояние не изменится - PullRequest
Новая
       16

Реагировать Родное состояние не изменится

0 голосов
/ 16 января 2020

Я работаю над своим первым игровым приложением.

Я хочу передать 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>
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Прежде всего: почему вы ищете путь без использования состояния? State будет «способом реагирования» на обработку этой информации, тем более что я предполагаю, что вы хотите перерисовать ваш компонент после изменения значения.

Но да, вы можете объявлять переменные вне вашей функции рендеринга или даже вне класса вашего компонента .

Когда вы начинаете изучать реактивный род, прямо сейчас, возможно, взгляните на функциональные компоненты и перехватчики реагирования (например, перехватчик useState для состояния), поскольку это более современный способ написания реагирующих компонентов.

Когда ваше состояние растет и его нужно разделить между различными компонентами в вашем дереве, вы можете захотеть взглянуть на контексты реакции или даже на библиотеку управления состояниями, такую ​​как redux.

Edit

Я также добавляю версию функционального компонента вашего компонента, чтобы показать, как вы можете управлять своим состоянием с помощью хуков, что для меня намного проще, поскольку обновление состояния гораздо менее сложно. Примечание. Функциональность - это только то, что пытается сделать ваш пример. 

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
0 голосов
/ 16 января 2020

Вы можете использовать AsyncStorage, предоставленный response-native-community. Это постоянное хранилище, где вы можете установить и получить хранилище значений ключей. Обращайтесь к этому: https://github.com/react-native-community/async-storage

В любом случае вы также можете использовать избыточность для глобального управления состоянием.

...