Javascript 如何在React Native上设置滑块的样式

我有一个特定的滑块。我如何设计它们？我用。这里是我的代码（我从中修改了代码）：

render（）{
常量滑块样式={
幻灯片摘要：{
宽度：200，
身高：80，
位置：'绝对'，
},
幻灯片：{
背景颜色：colors.primary，
宽度：（this.state.slideValue/50）*200，
身高：80，
边界右下角半径：100，
BorderTopRight半径：100
}
}
返回(
this.setState（{slideValue:value}）}
maximumTrackTintColor='transparent'
minimumTrackTintColor='transparent'
thumbStyle={styles.thumb}
/>
{this.state.slideValue}
);
}
}

当我向右挥舞时，我在跑道中间有圆角：

但我需要这样的东西：

---

我的错在哪里？谢谢。

我用比预期更简单的方法解决了这个问题。我刚刚设置了trackStyle（react native slider），这就像一个魅力。但现在我有另一个问题，如何得到滑块式轨道像“斑马”

render（）{
返回(
this.setState（{slideValue:value}）}
maximumTrackTintColor='transparent'
minimumTrackTintColor={colors.primary}
thumbStyle={styles.thumb}
trackStyle={style.track}
步骤={1}
/>
{this.state.slideValue}
min{this.state.min}
max{this.state.max}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
},
拇指：{
宽度：50，
身高：80，
背景颜色：colors.primary，
边界右下角半径：100，
BorderTopRight半径：100，
},
轨道：{
身高：80，
边界半径：20，
BorderTopRight半径：20，
}
});

---

这对我没用！在

@react native community/滑块上

    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>
        );
    }
}

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,
    }
});