React Native ListView'ın RefreshControl'ü nasıl özelleştirebilirim? RefreshControl

Question

React Native's ListView, RefreshControl adı verilen yerleşik bir Pull-to-refresh denetimine sahiptir. Kullanımı çok kolay.

Materyal tasarım ilerleme göstergesi gibi farklı bir görsel tasarım kullanmak için denetimin görünümünü ve görünümünü özelleştirmek istiyorum.

RefreshControl'ün görünümünü React Native olarak nasıl özelleştirebilirim?

Answer 1

Bunu tamamen yapabilirsiniz. Gerçi biraz çalışma gerektiriyor. Böyle bir şey yazarak başlayabilirsiniz.

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

yenilemek çekme olacak aktarırken, metin görmelisiniz "Özel gösterge buraya ..."

bu modeli takiben, sadece bir görünüm ve bir metnin yerine bileşeni yerleştirebilirsiniz .

Krediler için this article fikri için teşekkürler.

Answer 2

Sen yaparak zekâsı olabilir:

• absolute pozisyonuyla ListView
• ekleme bileşen transparent özelliklerini ayarlama

Örnek:

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

Bu sonucu oluşur: