Có cách nào để tạo thành phần Picker cho React Native và làm cho chiều cao của nó nhỏ hơn không?

Question

Tôi muốn sử dụng thành phần Picker trong ứng dụng React Native của mình, nhưng nó chiếm quá nhiều chiều cao của màn hình. Có cách nào để tự giới hạn trình chọn để chỉ hiển thị, giả sử, hai mục cùng một lúc, sau đó có thể cuộn trong phạm vi không?

Answer 1

gì về điều này từ 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

Answer 2

Từ chơi đùa với các phong cách, nó trông giống như một phần quan trọng nhất là phải thiết lập các itemStyle prop và xác định giá trị height đó. Bạn cũng có thể muốn tự tạo kiểu cho thành phần Picker và đặt giá trị height tương tự cho kết quả tìm kiếm tốt nhất, nhưng bạn không cần cần để thực hiện điều đó.

Về cố gắng để hiển thị hai hàng:

• Hiển thị một mặt hàng có vẻ là khoảng độ cao 44.
• Bạn có thể không thực sự hiển thị chính xác hai mục trong iOS vì thế các thành phần có nguồn gốc Picker được thiết kế. Nó sẽ hiển thị các phần của những gì ở trên và bên dưới giá trị hiện được chọn. Vì vậy, tốt nhất bạn có thể sắp xếp hiển thị một nửa/một nửa các giá trị đó. Bạn sẽ phải chơi xung quanh với chiều cao để tìm một cái gì đó phù hợp với bạn.

Minimal Ví dụ:

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

Dưới đây là một Snack cho thấy một ví dụ đầy đủ cho chiều cao khác nhau (mã copy dán dưới đây):

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