gifted - Cómo diseñar un control deslizante en Android con React Native

react native video controls

Question

Me gustaría utilizar un control deslizante en Android con React Native.

Las imágenes de seguimiento personalizadas y el pulgar son solo propiedades de iOS, entonces, ¿cuáles son las opciones disponibles en Android para diseñar la pista y el pulgar?

Más específicamente, estoy buscando una forma de cambiar el color del pulgar, el color de la pista mínima / máxima y su grosor ...

Answer 1

No es la primera vez para React Native tener un componente personalizable en una sola plataforma. Hasta que React Native agregue soporte para el diseño del componente Slider, sugiero implementarlo como un Componente nativo de UI en Android: https://facebook.github.io/react-native/docs/native-components-android.html

Sé que no tengo una solución fácil, pero dado que el soporte de Android para React Native se agregó un tiempo después de iOS, creo que aún puede haber un tiempo hasta que se ponga al día.

Answer 2

A partir de la versión 0.42.0, ahora hay algo de soporte para diseñar los controles deslizantes de Android con el componente RN Slider.

Consulte la solicitud de extracción para obtener más información o consulte los documentos para obtener más información.

Los accesorios que deberían ser utilizables para Android son:

• thumbTintColor
• minimumTrackTintColor
• maximumTrackTintColor

Answer 3

Puede ser demasiado tarde, pero será útil

Mi CustomSlider.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);

Conseguirá el control deslizante de grosor y personalizado como el siguiente.

CustomSlider