अनुकूलित करने के लिए कैसे देखो/प्रतिक्रिया के लग रहा है मूल निवासी ListView के RefreshControl

Question

प्रतिक्रिया मूल निवासी के ListView निर्मित एक पुल-टू-ताज़ा नियंत्रण बुलाया RefreshControl है। इसका उपयोग करना बहुत आसान है।

मैं रूप को अनुकूलित और नियंत्रण इस तरह के एक सामग्री डिजाइन प्रगति संकेतक का उपयोग कर के रूप में, एक अलग दृश्य डिजाइन का उपयोग करने के महसूस करना चाहते हैं।

मैं कैसे RefreshControl के रूप को कर सकते हैं मूल निवासी प्रतिक्रिया में?

Answer 1

आप पूरी तरह से कर सकते हैं। हालांकि कुछ काम की आवश्यकता है। आप इस तरह कुछ लिखकर शुरू कर सकते हैं।

<View style={styles.scrollview}> 
    <View style={styles.topBar}><Text style={styles.navText}>PTR Animation</Text></View> 
    <View style={styles.fillParent}> 
    <Text>Customer indicator goes here...</Text> 
    </View> 
    <View style={styles.fillParent}> 
    <ListView 
     style={{flex: 1}} 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => <View style={styles.row}><Text style={styles.text}>{rowData}</Text></View>} 
     ref='PTRListView' 
    /> 
    </View> 
</View> 

जब आप ताज़ा करने के लिए खींच लेंगे, तो आप पाठ दिखाई देना चाहिए "कस्टम सूचक यहां आता है ..."

इस पैटर्न के बाद, तुम सिर्फ एक दृश्य और एक पाठ के बजाय अपने घटक जगह कर सकते हैं ।

क्रेडिट के लिए, विचार के लिए this article के लिए धन्यवाद।

Answer 2

आप ऐसा करके यह चतुरता में मात देना कर सकते हैं:

• ListView
• जोड़ना घटक के लिए सेटिंग transparent गुण absolute स्थिति के साथ

उदाहरण:

<View style={{height:Dimensions.get('window').height}}> 
    {/* custom refresh control */} 
    <View 
    style={{position:'absolute', 
     width:Dimensions.get('window').width, height:60, 
     alignItems:'center', justifyContent:'center'}}> 
    <Progress.CircleSnail 
     color={['red', 'green', 'blue']} 
     duration={700} /> 
    </View> 
    {/* list view*/} 
    <ListView 
    dataSource={this.state.dataSource} 
    refreshControl={ 
     <RefreshControl 
     onLayout={e => console.log(e.nativeEvent)} 
     // all properties must be transparent 
     tintColor="transparent" 
     colors={['transparent']} 
     style={{backgroundColor: 'transparent'}} 
     refreshing={this.state.refreshing} 
     onRefresh={() => { 
      this.setState({refreshing:true}); 
      setTimeout(() => { 
      this._addRows() 
      }, 2000); 
     }} 
     /> 
    } 
    renderRow={(rowData) => <Text>{rowData}</Text>} /> 
</View> 

यह परिणाम है: