#reactjs #react-native
#reactjs #реагировать-родной
Вопрос:
Я хочу добавить выпадающий список в моем представлении. Я новичок в rnative, пожалуйста, помогите.
Я также добавил комментарий, в котором я пытаюсь добавить выпадающий список. Я попробовал это https://www.npmjs.com/package/react-native-dropdown-picker но это просто выдает мне какую-то ошибку.
импорт React, {useState } из ‘react’; //импорт useState импорт выпадающего списка из ‘react-native-dropdown-picker’; импорт {таблицы стилей, текста, представления, ввода текста, строки состояния, safeareview, изображения, кнопки, оповещения} из ‘react-native’;
export default function App() {
const [search, setSearch] = useState(''); //add this line
return (
<SafeAreaView>
<View style={styles.container}>
<TextInput
onChangeText={(text) => setSearch(text)}
placeholder="Search"
style={styles.searchbox}
></TextInput>
<View style={styles.makecentral} >
{search.length < 1 ? <Image
style={styles.tinyLogo}
source={require('./assets/icons8_search_200px_3.png')}
/> : (
null //add clear text image and clear search text
)}
</View>
<View style={{flexDirection:'row'}}>
<View elevation={2} style={{flex:3,backgroundColor:'#ffffff',height:40,marginTop:10,marginLeft:'2.5%',borderBottomLeftRadius:5,borderTopLeftRadius:5}}>
<Text style={{textAlign:'center',fontSize:20,color:'#FF7B00',marginTop:7}}>
Category
</Text>
</View>
<View elevation={2} style={{backgroundColor:'#FF7B00',height:40,flex:5,marginTop:10,borderTopRightRadius:5,borderBottomRightRadius:5,marginRight:'2.5%'}}>
//here..I want to add a dropdown..
</View>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
},
searchbox:{
backgroundColor:'#f2f2f2',
marginTop : StatusBar.currentHeight 5,
height : 50,
marginLeft:10,
marginRight : 10,
borderRadius : 20,
textAlignVertical:'center',
textAlign : 'center',
alignItems:'center',
},
tinyLogo: {
position : 'absolute',
width: 30,
height: 30,
opacity: 0.5,
marginTop: -40,
},
makecentral: {
alignItems:'center',
marginRight:80,
},
category:{
backgroundColor:'#f2f2f2',
height:50,
width:'90%',
alignContent:'center',
}
});
Комментарии:
1. в чем заключается ошибка, которую он вам выдает?
2. 1drv.ms/u/s !AsrHS57YPlM33SyN89lxvxI0nXMX?e=gVPSOn
3. Когда я пытаюсь добавить <Выпадающий список></DropDownPicker> в поле зрения.
Ответ №1:
Из вашего ответа кажется, что вы не предоставляете items
свой DropDownPicker
, поэтому он выходит из строя. Вы не можете просто предоставить пустой компонент.
Согласно документам, это должно выглядеть примерно так:
<DropDownPicker
items={[
{label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true},
{label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" />},
{label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" />},
]}
defaultValue={this.state.country}
containerStyle={{height: 40}}
style={{backgroundColor: '#fafafa'}}
onChangeItem={item => this.setState({
country: item.value
})}
/>
items
на самом деле это единственная опора, которая требуется.
Пожалуйста, обратитесь сюда
Комментарии:
1. где использовать это this.state = { country: ‘uk’ }
2. ноно, это был просто пример — адаптируйте его к своим данным. Добавьте данные, которые вы хотите отобразить в раскрывающемся меню выбора.
Ответ №2:
Это отличный пакет npm для добавления выпадающего списка: react-native-dropdown
Вы также можете использовать другие библиотеки компонентов, такие как Ui Kitten. Который содержит гораздо лучший выпадающий список.
Это конкретная ссылка на выпадающий список:- Ссылка
Есть много других библиотек, которые вы можете использовать. Подумайте об этом: — лучшие библиотеки
Ответ №3:
Вот библиотека, которую вы можете использовать для создания выпадающего списка в react native :-
Ответ №4:
https://www.npmjs.com/package/react-native-dropdown-picker
Работает очень хорошо, так как собственный редактор выбора iOS изменен на новую версию, которая не очень привлекательна или удобна для пользователя.
Обязательно прочитайте документ о zindex и перекрытии при использовании обеих платформ, поскольку это может вызвать некоторые проблемы.