web-dev-qa-db-fra.com

Existe-t-il un moyen de styliser le composant Picker pour React Native et de réduire sa hauteur?

Je voulais utiliser le composant Picker dans mon React Application native, mais il occupe trop de hauteur de l'écran. Existe-t-il un moyen de limiter le sélecteur lui-même pour afficher uniquement, disons, deux éléments à la fois, puis faire défiler l'intérieur?

javascriptreact-nativestylespicker
17
nbkhope

De jouer avec le style, il semble que la partie la plus importante est de définir le prop itemStyle et de définir la valeur height là. Vous voudrez probablement également styliser le composant Picker lui-même et définir la valeur height pour qu'elle soit la même pour les meilleurs résultats, mais vous ne le faites pas besoin de le faire.

À propos de la tentative d'affichage de deux lignes:

  • Afficher un élément semble avoir une hauteur d'environ 44.
  • Vous ne pouvez pas vraiment afficher exactement deux éléments dans iOS en raison de la conception du composant Picker natif. Il montrera des parties de ce qui est au-dessus et en dessous de la valeur actuellement sélectionnée. Donc, au mieux, vous pouvez en quelque sorte afficher la moitié/la moitié de ces valeurs. Vous devrez jouer avec la hauteur pour trouver quelque chose qui vous convient.

Exemple minimal:

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

Voici un Snack montrant un exemple complet pour différentes hauteurs (copie de code collée ci-dessous):

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'
  },
});
8
Michael Cheng

Réglez la hauteur de Picker du itemStyle à la hauteur de un: 44. Réglez sa hauteur de style sur 44. Supprimez flex: 1 s'il existe.

      <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
  }
})
1
Adrian Bartholomew