Android'de Kaydırıcıyı Nasıl Çalıştırsın? Native

Question

Android'de React Native kullanarak bir Slider kullanmak istiyorum.

Özel izleme görüntüleri ve başlıkları yalnızca iOS özellikleri, bu yüzden parçayı ve baş parmağınızı stillemek için Android'deki kullanılabilir seçenekler nelerdir?

Daha spesifik ben bir bileşeni olması Yerli Tepki için bir ilk değil

Answer 1

... başparmağın rengini, min/max parçanın rengini ve onların kalınlığını değiştirmek için bir yol arıyorum sadece bir platformda özelleştirilebilir. Yerli Slider bileşenini stil için destek katacak Tepki kadar, Android'de Yerli UI Bileşeni olarak uygulanması öneririz: https://facebook.github.io/react-native/docs/native-components-android.html

Ben kolay bir düzeltme yok biliyorum ama Yerli bir eklenmiştir React için Android desteği beri iOS'tan sonra, yakalanana kadar bir süre daha olabileceğini düşünüyorum.

Answer 2

Sürüm 0.42.0'dan itibaren, RN Slider bileşeniyle Android sürgülerini şekillendirme konusunda bazı destek var. Daha fazla bilgi için bkz.

See the pull request. Daha fazla bilgi için bkz. the docs. Android için kullanılabilir olmalıdır

sahne şunlardır:

• thumbTintColor
• minimumTrackTintColor
• maximumTrackTintColor

Answer 3

çok geç olabilir ama

Benim CustomSlider faydalı olacaktır. js

import React, { Component } from 'react'; 
import { 
    View, 
    TouchableWithoutFeedback, 
    TouchableOpacity, 
    Dimensions, 
    Text, 
    Slider 
} from 'react-native'; 
import { connect} from 'react-redux'; 
import rnfs from 'react-native-fs'; 


class CustomSlider extends Component { 

    state={ 
     slideValue: 0, 
    } 


    render() { 
     const width = Dimensions.get('window').width; 
     const sliderStyle = { 
      sliderDummy: { 
       backgroundColor: '#d3d3d3', 
       width: 300, 
       height:30, 
       borderRadius: 50, 
       position: 'absolute',     
      }, 
      sliderReal: { 
       backgroundColor: '#119EC2', 
       width: (this.state.slideValue/50) * 300, 
       height:30, 
      } 
     } 
     return(
      <View style={{borderRadius: 50, overflow: 'hidden'}}>  
      <View style={{flexDirection: 'row', position: 'absolute'}}> 
       <View style={sliderStyle.sliderDummy}></View> 
       <View style={sliderStyle.sliderReal}></View> 
      </View> 
      <Slider 
       style={{width: 300, height: 30, borderRadius: 50}} 
       minimumValue={0} 
       maximumValue={50} 
       value={this.state.slideValue} 
       onValueChange={(value)=> this.setState({ slideValue: value}) } 
       maximumTrackTintColor='transparent' 
       minimumTrackTintColor='transparent' 
       /> 

      </View> 

     ); 
    } 

}; 

const mapDispatchToProps = { 

}; 

const mapStateToProps = (state) => { 
    return{ 

    } 
}; 


export default connect(mapStateToProps, mapDispatchToProps)(CustomSlider); 

Aşağıdaki gibi kalınlık ve özel kaydırıcıyı elde edersiniz.

CustomSlider