2016-11-05 41 views
0

我想知道是否可以使用setTimeout函數推送到其他路由。我有一個組件,它是一個加載頁面,如果加載階段完成後我想要做什麼,我會在屏幕上顯示一條消息文本,但是1秒鐘後,我會自動推送到另一個路徑。React-Native在setTimeout之後推送到其他路由

我正在使用react-native-router-flux。

const pushRoute =() => setTimeout(() => Actions.home(), 1000); 

const PhotoPageOnSave = ({ photoState: { message, loading, error } }) => { 
    if (loading) { 
    return (
     <Container> 
     <View style={styles.root}> 
      <Spinner size="large" color="white" /> 
     </View> 
     </Container> 
    ); 
    } 
    return (
    <Container> 
     <View style={[styles.root, error ? { backgroundColor: '#C70018' } : null]}> 
     <View> 
      <Text style={styles.textStyle}>{message}</Text> 
     </View> 
     </View> 
     {() => pushRoute()} 
    </Container> 
); 
}; 

回答

1

你試圖做的是肯定可以的。會發生什麼,如果你替換...

{() => pushRoute()}

與...

{setTimeout(() => Actions.home(), 1000)}

{this.pushRoute}

???

+0

不要工作 – EQuimper

+0

有什麼問題?你在看什麼? –

+0

什麼都沒有發生我留在頁面上什麼都看不到我的消息但沒有別的什麼 – EQuimper

1

我認爲這是render()函數的一部分?

你可以這樣做,它通常不會在render()函數中完成。通常認爲這類行爲是保留給componentDidMount()componentWillReceiveProps()

喜歡的東西:

componentWillReceiveProps(nextProps){ 
    if(!nextProps.loading){ 
     pushRoute(); 
    } 
} 
+0

好是的,但如果我想告訴我的消息的另一個功能推之前?我的意思是我希望消息至少在1秒內顯示。 – EQuimper

+1

此時你已經找到了你喜歡的答案,但無論如何我都會通知你。 'componentWillReceiveProps()'在生命週期的'render()'之前立即被調用。我很難相信渲染需要超過幾毫秒的時間。 –

+0

謝謝你的回答很好我只是不想有反應組件,但更多的只是功能。但是,謝謝你的回答:) – EQuimper

1

你可以在你pushRoute功能

pushRoute(dly) { 
    return new Promise(function(resolve, reject) { 

     setTimeout(() => { 
     resolve() 
     }, dly); 
    }) 

    } 

寫一個承諾,稱這必須是異步例如一個onPress功能

async onPress(){ 
var result = await = this.pushRoute(1000); 
// and now you are free to call navigator.psuh here after 1000ms. 

} 
+0

萬一你不知道你可以在這裏練習。 http://www.es6fiddle.net –