Я хотел использовать компонент Picker в приложении React Native, но он занимает слишком большую высоту экрана. Есть ли способ сделать лимит лидера сам показывать только, скажем, по два элемента за раз, а затем прокручиваться внутри?
Есть ли способ подстроить компонент Picker для React Native и уменьшить его высоту?
Ответ 1
Из игры со стилем, похоже, самая важная часть - установить реквизит itemStyle
и определить там значение height
. Возможно, вы также захотите Picker
сам компонент Picker
и установить одинаковое значение height
для получения наилучших результатов, но вам не нужно этого делать.
О попытке показать две строки:
- Показ одного предмета выглядит примерно на высоте 44.
- На самом деле вы не можете показать ровно два элемента в iOS из-за того, как спроектирован нативный компонент Picker. Он покажет части того, что выше и ниже текущего выбранного значения. Так что в лучшем случае вы можете показывать половину/половину этих значений. Вам придется поиграть с высотой, чтобы найти то, что подходит для вас.
Минимальный пример:
<Picker style={{width: 200, height: 44}} itemStyle={{height: 44}}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
Вот закуска, показывающая полный пример для разной высоты (копия кода вставлена ниже):
import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
language: 'haxe',
firstLanguage: 'java',
secondLanguage: 'js',
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Unstyled:</Text>
<Picker
style={[styles.picker]} itemStyle={styles.pickerItem}
selectedValue={this.state.language}
onValueChange={(itemValue) => this.setState({language: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
<Text style={styles.title}>Shows one row:</Text>
<Picker
style={[styles.onePicker]} itemStyle={styles.onePickerItem}
selectedValue={this.state.firstLanguage}
onValueChange={(itemValue) => this.setState({firstLanguage: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
<Text style={styles.title}>Shows above and below values:</Text>
<Picker
style={[styles.twoPickers]} itemStyle={styles.twoPickerItems}
selectedValue={this.state.secondLanguage}
onValueChange={(itemValue) => this.setState({secondLanguage: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
padding: 20,
backgroundColor: 'white',
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 10,
},
picker: {
width: 200,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
pickerItem: {
color: 'red'
},
onePicker: {
width: 200,
height: 44,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
onePickerItem: {
height: 44,
color: 'red'
},
twoPickers: {
width: 200,
height: 88,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
twoPickerItems: {
height: 88,
color: 'red'
},
});
Ответ 2
Установите Picker
itemStyle
height для высоты один: 44. Установите его style
высоты на 44. Удалите flex: 1, если он существует.
<Picker
selectedValue={this.state.selectedState}
onValueChange={onValueChange}
style={styles.picker}
itemStyle={styles.pickerItem}
>
{this.state.states.map((v, i) => (
<Picker.Item key={i} label={v.label} value={v.value} />
))}
</Picker>
StyleSheet.create({
picker: {
// flex: 1,
width: "100%",
height: 44,
},
pickerItem: {
height: 44
}
})
Ответ 3
Как насчет этого от NativeBase:
import React, { Component } from 'react';
import { Container, Content, Picker } from 'native-base';
const Item = Picker.Item;
export default class PickerExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedItem: undefined,
selected1: 'key1',
results: {
items: []
}
}
}
onValueChange (value: string) {
this.setState({
selected1 : value
});
}
render() {
return (
<Container>
<Content>
<Picker
iosHeader="Select one"
mode="dropdown"
selectedValue={this.state.selected1}
onValueChange={this.onValueChange.bind(this)}>
<Item label="Wallet" value="key0" />
<Item label="ATM Card" value="key1" />
<Item label="Credit Card" value="key2" />
<Item label="Debit Card" value="key3" />
</Picker>
</Content>
</Container>
);
}
}