Anpassen des Look/Feel von React Native ListViews RefreshControl

Question

React Native's ListView verfügt über eine integrierte Pull-to-Refresh-Kontrolle namens RefreshControl. Es ist super einfach zu bedienen.

Ich möchte das Aussehen und Verhalten des Steuerelements anpassen, um ein anderes visuelles Design zu verwenden, z. B. die Verwendung eines Fortschrittsanzeigers für den Materialentwurf.

Wie kann ich das Aussehen des RefreshControl in React Native anpassen?

Answer 1

Sie können das vollständig tun. Es erfordert jedoch etwas Arbeit. Sie können beginnen, indem Sie etwas wie das schreiben.

<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> 

Wenn Sie aktualisieren werden ziehen, sollten Sie den Text finden Sie unter „Benutzerdefinierte Anzeige geht hier ...“

dieses Muster folgend, können Sie Ihre Komponente statt nur eine Ansicht platzieren und ein Text .

Für die Kredite, dank this article für die Idee.

Answer 2

Sie können es auszutricksen, indem Sie:

• transparent Eigenschaften Listview
• Hinzufügen Komponente mit absolute Position Einstellung

Beispiel:

<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> 

Dies ist das Ergebnis: