需要使用上面的图像调整滑块

Question

需要使用上面的图像调整滑块。

我看到滑块容器有一个保留的容器空间，我无法与布局匹配。 我正在使用react-native-slider和ImageBackground。 我做的是

我想实现如下

我怎样才能做到这一点？ 提前谢谢！

请找到以下代码

<View style= {{flex: 1,height:300:width:300,backgroundColor:'#fff',justifyContent: 'center'}}>
                    <ImageBackground source={this.state.currImage} style={styles.backgroundImage} >
                        <View style={{flex:93}}>
                         </View>

                        <View style = {{backgroundColor:'transparent',flex:7}}>
                            <View style={ styles.timeInfo2 }>
                                <Text style={ styles.time }>{  timeIsAt }</Text>
                                <Text style={ styles.timeRight }> { formattedTime( this.state.songDuration - this.state.currentTime ) }</Text>
                            </View>

                        </View>
                        <View >
                            <View style={{backgroundColor:'transparent'}}>
                                {/*<View style={styles.slidercontainer1}>*/}
                                <Slider
                                    onSlidingStart={ this.onSlidingStart.bind(this) }
                                    onSlidingComplete={ this.onSlidingComplete.bind(this) }
                                    onValueChange={ this.onSlidingChange.bind(this) }
                                    maximumValue={this.state.songDuration}
                                    step = {1}
                                    minimumTrackTintColor="#ccc000"
                                    thumbTintColor = "#ccc000"
                                    trackStyle= {{height:5}}
                                    value={this.state.value}

                                />
                            </View>
                        </View>


                    </ImageBackground>




                </View>

...

const Styles = StyleSheet.create({

   backgroundImage: {
            flex: 1,
            flexDirection:'column',


        }
    timeInfo2: {
            // backgroundColor: "#dfbacc",
            backgroundColor:'transparent',

            flexDirection: 'row',


        },

        time: {

            color: '#fff',
            flex: 1,
            fontSize: 15,
            fontWeight:'bold'
        },
        timeRight: {
            color: '#fff',
            // color: '#7700ff',
            textAlign: 'right',
            flex: 1,
            fontSize: 15,
            fontWeight:'bold'
        },

})