react-native - Invariant Violation：试图注册两个同名的视图 RNDatePicker
问题描述
更新：即使我卸载了软件包并将其导入组件中，此错误仍然存在。我期待模块未找到错误，但同样的错误仍然存在
我试图在我的 react native 应用程序中使用https://github.com/henninghall/react-native-date-picker这个日期选择器，但是在将此选择器导入我的组件时，我收到错误 Invariant Violation: 试图注册两个视图同名 RNDatePicker
代码
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
// import DropdownPicker from '../DropdownPicker';
import { Platform } from 'react-native';
// import Icon from 'react-native-vector-icons/Feather';
// import Icon from "react-native-vector-icons/Ionicons";
import DatePicker from 'react-native-date-picker'
// import Select from '../../utiSSSls/react-native-advanced-select';
// import Select from 'react-native-advanced-select';
// import { Select, Option } from "react-native-single-select";
// import XDate from 'xdate';
// import { TimePicker } from 'react-native-simple-time-picker';
// import TimePicker from 'react-native-timepicker';
// import TimePicker from 'react-dropdown-timepicker';
// import Feather from 'react-native-vector-icons/Feather';
// import { TextInput } from 'react-native-gesture-handler';
// import DatePickerr from '../../utils/react-native-date-picker-new'
export default class RadioButton extends Component {
state = {
date: new Date(),
isShowStart: false,
isShowEnd: false,
startTime: '12:00pm',
endTime: '1:00pm',
value: null,
selectedPicker: null,
picker: 'No Minimum Duration',
itemsA: [
{ label: 'Owner for this place', value: 'opt1' },
{ label: 'France', value: 'france' },
{ label: 'Germany', value: 'germany' }
],
items: [
{ myKey: 1, myLabel: "Fruits" },
{ myKey: 2, myLabel: "Red Apples" },
{ myKey: 3, myLabel: "Cherries" },
{ myKey: 4, myLabel: "Cranberries" },
{ myKey: 5, myLabel: "Pink Grapefruit" },
{ myKey: 6, myLabel: "Raspberries" },
{ myKey: 7, myLabel: "Vegetables" },
{ myKey: 8, myLabel: "Beets" },
{ myKey: 9, myLabel: "Red Peppers" },
{ myKey: 10, myLabel: "Radishes" },
{ myKey: 11, myLabel: "Radicchio" },
{ myKey: 12, myLabel: "Red Onions" },
{ myKey: 13, myLabel: "Red Potatoes" },
{ myKey: 14, myLabel: "Rhubarb" },
{ myKey: 15, myLabel: "Tomatoes" }
],
selectedKey: '',
selectedHOur: 1,
selectedDay: 1,
selectedWeek: 1,
selectedMonth: 1,
};
onChangeItem = (value, name) => {
}
// onselectHandler = (value) => {
// this.setState({
// selectedPicker: value,
// })
// }
componentDidMount() {
}
componentDidUpdate(prevProps, prevState) {
if (prevState.value !== this.state.value) {
switch (this.state.value) {
case 'No Minimum Duration':
break;
case 'Hour':
this.setState({
selected: 'hour',
selectedKey: this.state.selectedHOur,
itemsA: [
{ label: '1 Hour', value: 1 },
{ label: '2 Hours', value: 2 },
{ label: '3 Hours', value: 3 },
{ label: '4 Hours', value: 4 },
{ label: '5 Hours', value: 5 },
{ label: '6 Hours', value: 6 },
{ label: '7 Hours', value: 7 },
{ label: '8 Hours', value: 8 },
{ label: '9 Hours', value: 9 },
{ label: '10 Hours', value: 10 },
{ label: '12 Hours', value: 12 },
]
})
break;
case 'Day':
this.setState({
selected: 'day',
selectedKey: this.state.selectedDay,
itemsA: [
{ label: '1 Day', value: 1 },
{ label: '2 Days', value: 2 },
{ label: '3 Days', value: 3 },
{ label: '4 Days', value: 4 },
{ label: '5 Days', value: 5 },
{ label: '6 Days', value: 6 },
{ label: '7 Days', value: 7 },
]
})
break;
case 'Week':
this.setState({
selected: 'week',
selectedKey: this.state.selectedWeek,
itemsA: [
{ label: '1 Week', value: 1 },
{ label: '2 Weeks', value: 2 },
{ label: '3 Weeks', value: 3 },
{ label: '4 Weeks', value: 4 },
]
})
break;
case 'Month':
this.setState({
selected: 'month',
selectedKey: this.state.selectedMonth,
itemsA: [
{ label: '1 month', value: 1 },
{ label: '2 month', value: 2 },
{ label: '3 month', value: 3 },
{ label: '6 month', value: 6 },
]
})
break;
}
}
}
onSelectedItemsChange = (item, index) => {
console.log(item, "itemmmm")
// const key = item.label
// console.log(item.label,"keyyyy")
if (this.state.selected == 'hour') {
this.setState({ selectedHOur: item.value });
}
else if (this.state.selected == 'day') {
this.setState({ selectedDay: item.value });
}
else if (this.state.selected == 'week') {
this.setState({ selectedWeek: item.value });
}
else if (this.state.selected == 'month') {
this.setState({ selectedMonth: item.value });
}
this.setState({ selectedKey: item.value });
this.props.setValue(item.value);
};
setDate = (date) => {
console.log(date, "date")
}
render() {
const { PROP } = this.props;
const { value } = this.state;
return (
<View>
{PROP.map(res => {
return (
<View key={res.key}>
<View style={styles.container}>
<TouchableOpacity
style={[value === res.key ? styles.radioCircleActive : styles.radioCircle]}
onPress={() => {
console.log("kyyyyy kooooo")
this.props.setRadioValue(res.key.toLowerCase())
this.setState({
value: res.key,
})
}}>
{value === res.key && <View style={styles.selectedRb} />}
</TouchableOpacity>
<Text style={styles.radioText}>{res.text}</Text>
</View>
{
value === res.key && res.key != 'No Minimum Duration' && !this.props.isHidedrpdwn ?
(
<View style={{ marginBottom: 20, left: 40, width: '80%' }}>
{/* <DropdownPicker
items={this.state.itemsA}
defaultValue={this.state.itemA}
onselectHandler={this.onselectHandler}
onChangeItem={value => this.props.setValue(value.value)}
name='relation'
/> */
// slecteddd -=------nipuna
<Select
selectedKey={this.state.selectedKey}
data={this.state.itemsA}
width={250}
placeholder="Select a value ..."
onSelect={this.onSelectedItemsChange.bind(this)}
// onSelect={value => { this.onSelectedItemsChange.bind(this) }}
search={false}
keyExtractor={(item) => item.value || ''}
labelExtractor={(item) => item.label || ''}
parentScrollEnable={() => { true }}
style={{
backgroundColor: '#F8F9FB',
height: 45,
borderWidth: 1,
borderColor: '#ECEDF0',
borderRadius: 5,
}}
optionNumberOfLines={5}
selectedRowStyle={{ backgroundColor: '#ffffff' }}
optionTextStyle={{ color: '#173756', fontFamily: 'Poppins-Regular', fontSize: 12 }}
optionContainerStyle={{
borderTopWidth: 0,
borderColor: '#ECEDF0',
backgroundColor: 'red',
borderRadius: 5
}}
/>
}
</View>
) :
value === res.key && res.key != 'All time' && this.props.isHidedrpdwn ?
(console.log("elseee"),
<View style={{ marginBottom: 20, left: 40, width: '80%', justifyContent: 'space-between', flexDirection: 'row' }}>
<View style={{ flex: .48 }}>
<View editable={false}
style={{ height: 45, borderWidth: 1, borderColor: '#ECEDF0', backgroundColor: '#F8F9FB', flexDirection: 'row', borderRadius: 5, justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={{ left: 5, fontFamily: 'Poppins-Regular', size: 12, lineHeight: 18, color: '#173756' }}>{this.state.startTime}</Text>
{!this.state.isShowStart ? <TouchableOpacity onPress={() => {
this.setState({
isShowStart: true,
isShowEnd: false
})
}}>
<Feather name="chevron-down" size={20} color={'#8D8D8D'} />
</TouchableOpacity> :
<TouchableOpacity onPress={() => {
this.setState({
isShowStart: false,
})
}}>
<Feather name="chevron-up" size={20} color={'#8D8D8D'} />
</TouchableOpacity>}
</View>
{/* {this.state.isShowStart ?
<DatePickerr
is24hourSource='device'
// fadeToColor='gray'
date={this.state.date}
// onDateChange={this.setDate}
onDateChange={(date) => {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
console.log(strTime, "kkkk bei")
this.setState({ startTime: strTime });
}}
mode={'time'}
style={{ backgroundColor: '#FBFCFD', shadowOffset: 3, shadowColor: 'red', elevation: 5, width: 147 }}
/>
: null} */}
</View>
<View style={{ flex: .48 }}>
<View editable={false}
style={{ height: 45, borderWidth: 1, borderColor: '#ECEDF0', backgroundColor: '#F8F9FB', flexDirection: 'row', borderRadius: 5, justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={{ left: 5, fontFamily: 'Poppins-Regular', size: 12, lineHeight: 18, color: '#173756' }}>{this.state.endTime}</Text>
{!this.state.isShowEnd ? <TouchableOpacity onPress={() => {
this.setState({
isShowStart: false,
isShowEnd: true
})
}}>
<Feather name="chevron-down" size={20} color={'#8D8D8D'} />
</TouchableOpacity> :
<TouchableOpacity onPress={() => {
this.setState({
isShowEnd: false,
})
}}>
<Feather name="chevron-up" size={20} color={'#8D8D8D'} />
</TouchableOpacity>}
</View>
{/* {this.state.isShowEnd ?
<DatePickerr
is24hourSource='device'
// fadeToColor='gray'
date={this.state.date}
// onDateChange={this.setDate}
onDateChange={(date) => {
var hours = date.getHours();
var minutes = date.getMinute
s();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
console.log(strTime, "kkkk bei")
this.setState({ endTime: strTime });
}}
mode={'time'}
style={{ backgroundColor: '#FBFCFD', shadowOffset: 3, shadowColor: 'red', elevation: 5, width: 147 }}
/>
: null} */}
</View>
</View>) : null
}
</View>
);
})}
{/* {/ <Text> Selected: {this.state.value} </Text> /} */}
</View>
);
}
}
我究竟做错了什么 ？为什么会发生这个错误？如何解决这个问题？
解决方案
推荐阅读
- webview - 如何在android webview（android最新版本）中保存用户名和密码？
- javascript - “AbortController”可以用作“removeEventListener”的功能替代品吗？
- javascript - JSON 对象数组无法通过索引访问，只能通过“response.data”访问
- javascript - 如何检索 [] 内的 json
- django - 避免 django 模型中的重复行条目
- react-native - 如果应用程序已打开，则来自 expo-branch 的 Branch.subscribe 不会收到数据
- javascript - 根据国家/地区隐藏文本
- deeplearning4j - 从大的 double[][] 数组中高效地创建 `DataSetIterator`
- python - Ubuntu 与 USB 设备的通信
- time - Power BI Avg 加权时间格式度量