react-native - 如何修复元素类型无效预期反应原生中的字符串或类/函数错误?
问题描述
我正在使用 react native 创建一个音乐应用程序,并安装“react-native-slider”“react-native-video”包。当我运行应用程序时,它给出一个错误“元素类型无效,预期字符串或类/函数(对于复合组件)但得到:对象”。我该如何解决这个问题?
这是我的 SeekBar.js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
} from 'react-native';
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',
}
});
解决方案
npm install @react-native-community/slider --save
npx pod-install
react-native run-ios
修改代码如下:
import Slider from '@react-native-community/slider';
<Slider
style={{width: 200, height: 40}}
minimumValue={0}
maximumValue={1}
minimumTrackTintColor="#FFFFFF"
maximumTrackTintColor="#000000"
/>
它对我有用。
推荐阅读
- php - 收到错误“PHP 消息:PHP 通知:未知:在系统的临时目录中创建的文件在第 0 行的未知\nPHP 消息:PHP 警告:
- java - 使用 jsoup 连接到不受信任的证书
- oracle - 我的问题是关于插入后创建触发器?
- wordpress - 尝试使用 allimport woocommerce 从 csv 导入产品
- c# - 使用多种字体将html转换为pdf
- sql - SQL Server:组合列中止相同的值
- matlab - 在脚本中调用的 matlab 函数会导致脚本中断吗?
- python - 如何在卷积自动编码器中使用 pytorch 库中的 MaxUnpool1d?
- javascript - 如何在光滑的灯箱中禁用无限循环?
- java - JFrame 中的组件不显示是否跟随启动进程