ネイティブ応答：リストビューレンダリングまで

Question

まで私のアプリでSpinnerを実行します。Firebaseからデータを取り出し、ListViewでレンダリングします。リスト全体が出現するまでスピナーが動くようにしたい。

リストはまだここで

が私のコードで表示されていないので、私はstate.loadingが「本当」であるかどうかを示す条件付きビューを追加しましたが、私はcomponentDidMount機能でそれを変更した場合は動作しません。 ：

module.exports = React.createClass({ 
getInitialState() { 
return({ 
    loading: false, 
    displayName: '', 
    title: '', 
    dataSource: ds.cloneWithRows([{ 
    title: '', 
    author: '' 
    }]) 
    }) 
}, 

componentDidMount() { 
let user = firebaseApp.auth().currentUser; 

if (!user.displayName) { 
    this.props.navigator.push({ 
    name: 'chooseName' 
    }) 
} else { 
    // proceed normally with application 
    this.setState({ 
    displayName: user.displayName 
    }) 

    this.listenForItems(topicsRef); 
} 

}, 

listenForItems(ref) { 
    ref.on('value', (snap) => { 
    let topics = []; 
    snap.forEach(topic => { 
    topics.push({ 
     title: topic.val().title, 
     author: topic.val().author, 
     key: topic.key 
    }) 
    }) 
    this.setState({dataSource: ds.cloneWithRows(topics)}); 
    }) 
    }, 

    signOut() { 
// sign out the user 
firebaseApp.auth().signOut() 
    .then(() => { 
    // Sign out successful 
    this.props.navigator.popToTop(); 
    }, (error) => { 
    console.log(error); 
    }) 
}, 

details(data) { 
this.props.navigator.push({ 
    name: 'topicDetail', 
    displayName: this.state.displayName, 

    title: data.title, 
    author: data.author, 

    row_uid: data.key 
}) 
}, 

renderRow(rowData) { 
return (
    <TouchableOpacity style={styles.row} 
    onPress={() => this.details(rowData)} 
    > 
    <Text style={styles.rowTitle}> 
     {rowData.title} 
    </Text> 
    <Text> 
     {rowData.author} 
    </Text> 
    </TouchableOpacity> 
) 

}, 

addTopic() { 
topicsRef.push({ 
    title: this.state.title, 
    author: this.state.displayName 
}) 
}, 

render() { 
if (this.state.loading) { 
    return (
    <Container style={styles.containerSignIn}> 
    <Content> 
     <Spinner /> 

    </Content> 
</Container>); 
} 
return (
    <View style={styles.flexContainer}> 
    <View style={styles.header}> 
     <TouchableOpacity 
     onPress={() => this.signOut()} 
     > 
     <Text style={styles.link}> 
      Sign out 
     </Text> 
     </TouchableOpacity> 
     <Text style={styles.title}> 
     {this.state.displayName} 
     </Text> 
    </View> 
    <View style={styles.body}> 
     <TextInput 
     placeholder='Something on your mind?' 
     style={styles.input} 
     onChangeText={(text) => this.setState({title: text})} 
     onEndEditing={() => this.addTopic()} 
     /> 
     <ListView 
     style={styles.list} 
     enableEmptySections={true} 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => this.renderRow(rowData)} 
     /> 
    </View> 
    </View> 
) 
} 
}); 

Answer 1

あなたのSpinnerコンポーネントが動作すると仮定します。ため、私は最初の実行にお勧めすることができますどのようなあなたの反応のライフサイクルにおける潜在的な問題へ

：定義するときに

1）あなたは、あなたのビューが現れたときに、あなたのスピナーをアクティブにする場合は、trueにstate.loading設定しましたあなたのinitialState。

getInitialState() { 
    return({ 
     loading: true, 
     ... 
    }) 
} 

2. firebase要求の（成功）Promiseコールバックでローディング状態を変更し、componentDidMount（）ではなく変更します。

listenForItems(ref) { 
    ref.on('value', (snap) => { 
     ... 
     this.setState({ 
      loading: false, 
      dataSource: ds.cloneWithRows(topics) 
     }); 
    }) 
}