等待在React-Native組件中顯示文本

我有一個組件從api獲取數據，然後將數據顯示在屏幕上。我想知道的是，如何延遲顯示屏幕上的文本，直到api調用完成？等待在React-Native組件中顯示文本

例：

Your Balance is ____

網絡呼叫後儘可能快的成分呈現解決

Your Balance is 500

但"Your Balance is"顯示器。

import React, { Component, PropTypes } from 'react' 
import {StyleSheet, View, Text} from 'react-native' 

export default class Main extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     accountBalance: '' 
    }; 

    fetch('someURL', {method: "GET"}) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     this.setState({ 
      accountBalance: responseData.amount 
     }) 
     }) 
     .done(); 

    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={{color: '#FFF'}}> Your Account Balance is {this.state.accountBalance} </Text> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    padding: 10, 
    paddingTop: 74, 
    backgroundColor: 'black' 
    } 
})

來源

2016-12-29 Seal

不要拖延任何東西，但不顯示問題'在頁面加載你的平衡is'要麼...顯示加載指示器 – azium

你好點。試圖習慣於在移動設計中思考。 – Seal

在這種情況下，你可以做的返回null簡單的東西時，有沒有平衡：

render() { 
    return (
    <View style={styles.container}> 
     {this.state.accountBalance ? (
     <Text style={{color: '#FFF'}}> Your Account Balance is {this.state.accountBalance} </Text> 
    ) : null} 
    </View> 
) 
}

你可以使用一個單獨的狀態變量，以及跟蹤的要求，如this.state.balanceLoaded: false和直到該更改返回null。然後，您將在fetch回調中將該值更新爲true。這將解決其中的值返回但是falsy，如''或0

來源

2016-12-29 19:03:00 bendman

等待在React-Native組件中顯示文本

回答

相關問題