检查“SeekBar”的渲染方法

Question

invariant violation element type is invalid: expected a string (for built-in components) or a class/function but got: object 

检查SeekBar的渲染方法

我不知道我的 SeekBar 代码的对象错误是什么。感谢您的帮助。

var Slider = require('react-native-slider');

function pad(n, width, z=0) {
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

const minutesAndSeconds = (position) => ([
    pad(Math.floor(position / 60), 2),
    pad(position % 60, 2),
]);

const SeekBar = ({
    trackLength,
    currentPosition,
    onSeek,
    onSlidingStart,
    })=> {
        const elapsed = minutesAndSeconds(currentPosition);
        const remaining = minutesAndSeconds(trackLength - currentPosition);
        return (
            <View style={styles.container}>
              <View style={{flexDirection: 'row'}}>
                <Text style={styles.text}>
                  {elapsed[0] + ":" + elapsed[1]}
                </Text>
                <View style={{flex: 1}} />
                <Text style={[styles.text, {width: 40}]}>
                  {trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]}
                </Text>
              </View>
              <Slider
                maximumValue={Math.max(trackLength, 1, currentPosition + 1)}
                onSlidingStart={onSlidingStart}
                onSlidingComplete={onSeek}
                value={currentPosition}
                style={styles.slider}
                minimumTrackTintColor='#fff'
                maximumTrackTintColor='rgba(255, 255, 255, 0.14)'
                thumbStyle={styles.thumb}
                trackStyle={styles.track}/>
            </View>
        );
};

export default SeekBar;

这是我的样式表代码：

const styles = StyleSheet.create({
    slider: {
        marginTop: -12,
    },
    container: {
        paddingLeft: 16,
        paddingRight: 16,
        paddingTop: 16,
    },
    track: {
        height: 2,
        borderRadius: 1,
    },
    thumb: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: 'white',
    },
    text: {
        color: 'rgba(255, 255, 255, 0.72)',
        fontSize: 12,
        textAlign:'center',
    }
});

Answer 1

您是否尝试过像import { Slider } from "react-native-slider" 这样导入滑块？

或者只是import Slider from "react-native-slider"？