Quería usar el Selector de componente en mi Reaccionan aplicación Nativa, pero se toma demasiado altura de la pantalla. Es allí una manera de hacer que el selector se limita a mostrar sólo, digamos, dos elementos a la vez, a continuación, ser desplazable dentro?

OriginalEl autor nbkhope | 2016-08-23

2 Comentarios

  1. 7

    De jugar con el estilo, se ve como la parte más importante es establecer el itemStyle la proposición y definir el height valor allí. Probablemente usted también desea que el estilo de la Picker componente de la misma y establecer el height valor de ser el mismo para los mejores resultados, pero no necesidad a hacer eso.

    Acerca de tratar de mostrar dos filas:

    • Mostrando un elemento que parece ser en torno a una altura de 44.
    • Realmente no se puede mostrar exactamente dos elementos en iOS debido a cómo los nativos Selector de componente está diseñado. Lo voy a mostrar partes de lo que está por encima y por debajo del valor seleccionado actualmente. Así que a lo mejor se puede mostrar de la mitad/mitad de esos valores. Tendrás que jugar con la altura de encontrar algo que funcione para usted.

    Mínimo Ejemplo:

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

    Aquí un Merienda muestra un ejemplo completo para distintas alturas (código copiado y pegado más abajo):

    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'
      },
    });
    
    itemStyle={{height: 44}} no cambia el elemento de altura… reaccionar-nativo:0.55.4
    itemStyle solo ios

    OriginalEl autor Michael Cheng

  2. -5

    Lo que acerca de esto desde 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>
            );
        }
    }
    

    https://docs.nativebase.io/COMPONENTS.html#Picker

    Le preguntó acerca de la RN selector y ofrece una completamente diferente lib

    OriginalEl autor Norfeldt

Dejar respuesta

Please enter your comment!
Please enter your name here