React Native의 Picker 구성 요소 스타일을 지정하고 높이를 더 작게 만들 수 있습니까?

Question

내 React 네이티브 응용 프로그램에서 피커 구성 요소를 사용하려고했지만 화면의 높이가 너무 높습니다. 피커가 한 번에 두 개의 항목 만 표시하도록 제한 한 후 스크롤 할 수 있습니까? NativeBase에서이 약

Answer 1

일 : 가장 중요한 부분은 itemStyle 소품을 설정하고 거기에 height 값을 정의하는 것입니다 같은

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

스타일링으로 주위를 연주에서, 그것은 보인다. Picker 구성 요소 자체의 스타일을 지정하고 가장 좋은 결과를 얻으려면 height 값을 동일하게 설정해야하지만 에이 필요하지 않습니다. 두 행 보여 주려 소개

:

• 하나 개의 항목을 표시 당신은 정말 때문에 어떻게 기본 선택기 구성 요소의 아이폰 OS에서 정확히 두 개의 항목을 표시 할 수 없습니다 (44)
• 의 높이 주위에 보이는 디자인되었습니다. 현재 선택된 값의 위와 아래 부분을 보여줍니다. 따라서 최고로 반값/반값을 반올림 할 수 있습니다. 너는 너를 위해 일하는 무언가를 찾기 위해 높이와 놀아야 만 할 것이다.

최소 예 : 여기

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

는 Snack가 높이 변화에 대한 전체 예 (코드는 아래 붙여 복사)를 표시입니다 : 그는 RN 선택기에 대한 질문

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