Handling Variablen in reagieren nativen

Question

Ich versuche, eine App zu machen, wo, wenn eine Taste gedrückt wird, lädt es einen zufälligen Bildschirm.

const Slides = [Slide0, Slide1, Slide2, Slide3, Slide4, Slide5]; 

randomNumber = Math.floor(Math.random() * 6); 

class HomeScreen extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     randomNumber: 1, 
    }; 
    } 

    _onPressButton =() => { 
    randomNumber = Math.floor(Math.random() * 6); 
    this.setState({randomNumber: randomNumber}); 
    this.props.navigation.navigate('NextScreen'); 
    } 

    static navigationOptions = { 
     header: null, 
    } 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View style={styles.container}> 
     <Image 
     source={require('./assets/icons/app-icon.png')} 
     style={{width: 50, height: 50}} 
     /> 
     <Text style={{ marginTop: 100 }}>Welcome to Dementia Care Activities.</Text> 
     <Text>Next slide should be: {this.state.randomNumber}</Text> 
     <Text>{randomNumber}</Text> 
     <Button 
      onPress={this._onPressButton} 
      title="Get New Activity" 
     /> 
     </View> 
    ); 
    } 
} 

const SimpleAppNavigator = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    NextScreen: { screen: Slides[randomNumber] } 
}); 

const AppNavigation =() => (
    <SimpleAppNavigator /> 
); 

export default class App extends React.Component { 
    render() { 
    return (
     <AppNavigation/> 
    ); 
    } 
} 

Das Problem hierbei ist, dass der Wert für randomNumber nie wieder aktualisiert wird, wenn die Schaltfläche geklickt wird, aber der Rest des Codes in _onPressButton läuft wie erwartet.

Wenn ich die App neu lade, erhalte ich einen anderen zufällig zugewiesenen Wert für randomNumber, aber dann kann dieser Wert nicht überschrieben werden.

Wie mache ich es so, dass der Wert aktualisiert wird?

Answer 1

Wenn Sie eine Variable innerhalb Ihrer Renderfunktion aktualisieren möchten, müssen Sie dies im Status deklarieren. Wenn Sie diese Zeile

<Text>{randomNumber}</Text>

wollen in Ihrem machen neue Zufallszahl zu reflektieren, dann müssen Sie

<Text>{this.state.randomNumber}</Text>

stattdessen verwenden. Lassen Sie mich wissen, wenn dies nicht der Fall ist, was Sie für :)

suchen diese

Answer 2

Versuchen:

this.props.navigation.navigate('NextScreen', randomNumber);