處理變量的反應本地

我試圖做一個應用程序，當按下按鈕時，它會加載一個隨機屏幕。處理變量的反應本地

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/> 
    ); 
    } 
}

的這裏的問題是，randomNumber值如預期永遠不會被再次更新按鈕被按下時，代碼不過休息_onPressButton運行。

當我重新加載應用程序時，我得到一個不同的隨機分配的值爲randomNumber，但該值不能被覆蓋。

我該如何使值得到更新？

來源

2017-08-07 Chris Chong

如果你想更新渲染函數中的變量，那麼你需要聲明狀態。如果您希望此行

<Text>{randomNumber}</Text>

在

渲染，以反映新的隨機數，那麼你需要使用

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

代替。讓我知道這是不是你在找什麼:)

來源

2017-08-07 07:16:25

即並不完全符合我要找的。問題是當按下按鈕並且運行_onPressButton函數時，新值不會傳遞到 const SimpleAppNavigator = StackNavigator（{0} {{：screen：HomeScreen}， NextScreen：{屏幕：幻燈片[randomNumber]} }）; –

試試這個：

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

來源

2017-08-07 14:31:16

處理變量的反應本地

回答

相關問題