javascript - 如何在 React Native 上设置 Slider 的样式

Question

我有一个特定的滑块。我该如何设计它们？我使用react-native-slider。这是我的代码（我从这个例子修改了代码）：

    render() {
        const sliderStyle = {
            sliderDummy: {
                width: 200,
                height: 80,
                position: 'absolute',
            },
            sliderReal: {
                backgroundColor: colors.primary,
                width: (this.state.slideValue / 50) * 200,
                height: 80,
                borderBottomRightRadius: 100,
                borderTopRightRadius: 100
            }
        }
        return (
            <View style={styles.container}>

                <View style={{overflow: 'hidden'}}>
                    <View style={{flexDirection: 'row', position: 'absolute'}}>
                        <View style={sliderStyle.sliderDummy}></View>
                        <View style={sliderStyle.sliderReal}></View>
                    </View>
                <Slider
                    style={{width: 200, height: 80}}
                    minimumValue={0}
                    maximumValue={50}
                    value={this.state.slideValue}
                    onValueChange={(value)=> this.setState({ slideValue: value}) }
                    maximumTrackTintColor='transparent'
                    minimumTrackTintColor='transparent'
                    thumbStyle={styles.thumb}
                />
                    <Text>{this.state.slideValue}</Text>
                </View>
            </View>
        );
    }
}

当我向右滑动时，我在轨道中间有圆角：

但我需要这样的东西：

我的错误在哪里？谢谢。

标签： javascriptreactjsreact-native

Answer 1

我比预期更容易解决这个问题。我刚刚设置了 trackStyle(react-native-slider) 这就像一个魅力。但现在我有另一个问题，如何获得像“斑马”一样的滑块样式轨道。

render() {
        return (
            <View style={styles.container}>
                <Slider
                    style={{width: 150, height: 80}}
                    minimumValue={this.state.min}
                    maximumValue={this.state.max}
                    value={this.state.min}
                    onValueChange={(value)=> this.setState({ slideValue: value}) }
                    maximumTrackTintColor='transparent'
                    minimumTrackTintColor={colors.primary}
                    thumbStyle={styles.thumb}
                    trackStyle={styles.track}
                    step={1}
                />

                <Text>{this.state.slideValue}</Text>
                <Text>min {this.state.min}</Text>
                <Text>max {this.state.max}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    thumb: {
        width: 50,
        height: 80,
        backgroundColor: colors.primary,
        borderBottomRightRadius: 100,
        borderTopRightRadius: 100,

    },
    track:{
        height: 80,
        borderBottomRightRadius: 20,
        borderTopRightRadius: 20,
    }
});