Existe uma maneira de estilizar o componente Picker para o React Native e diminuir sua altura?

12

Eu queria usar o componente Picker em meu aplicativo React Native, mas ele ocupa muito a altura da tela. Existe uma maneira de fazer o seletor limitar-se a mostrar apenas, digamos, dois itens por vez e, em seguida, ser rolável dentro de?

    
por nbkhope 23.08.2016 в 20:25
fonte

2 respostas

8

Ao brincar com o estilo, parece que a parte mais importante é definir itemStyle prop e definir o valor height . Provavelmente, você também desejará estilizar o componente Picker e definir o valor height como o mesmo para os resultados mais bonitos, mas não é necessário para fazer isso.

Sobre a tentativa de mostrar duas linhas:

  • Mostrar um item parece estar em torno de uma altura de 44.
  • Você não pode mostrar exatamente dois itens no iOS devido à maneira como o componente Selecionador nativo foi criado. Ele mostrará partes do que está acima e abaixo do valor atualmente selecionado. Então, na melhor das hipóteses, você pode mostrar metade / metade desses valores. Você terá que brincar com a altura para encontrar algo que funcione para você.

Exemplo mínimo:

<Picker style={{width: 200, height: 44}} itemStyle={{height: 44}}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Aqui está um Snack mostrando um exemplo completo para diferentes alturas (cópia de código colada abaixo):

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'
  },
});
    
por Michael Cheng 11.07.2017 / 20:22
fonte
-4

E sobre isso a partir do 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>
        );
    }
}

link

    
por Norfeldt 12.04.2017 / 20:58
fonte