有没有一种方法可以为React Native的Picker组件设置样式并使其高度更小？

Question

我想在我的React Native应用程序中使用Picker组件，但它会占用屏幕太多高度。是否有一种方法可以使选择器限制自身仅显示两个项目，然后在内部滚动？

- nbkhope

Answer 1

通过对样式进行调整，看起来最重要的部分是设置itemStyle属性并在其中定义height值。您可能还想为Picker组件本身设置样式并将height值设置为相同以获得最佳效果，但您不需要这样做。

关于尝试显示两行：

• 显示一个条目的高度大约为44。
• 在iOS中无法完全显示两个项目，因为原生的Picker组件是如何设计的。它会显示当前选定值上面和下面的部分内容。因此，最多只能同时显示上/下这些值的一半。您需要调整高度以找到适合您的值。

最小示例：

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

这里有一个Snack，展示了一个可变高度的完整示例（以下为代码复制）:

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

- Michael Cheng

---

itemStyle={{height: 44}} 不会改变项目的高度... react-native:0.55.4 - chenop

@chenop itemStyle 仅适用于 iOS。 - Nerius Jok

Answer 2

将Picker的itemStyle高度设置为一个项目的高度：44。将其style高度设置为44。如果存在，请删除flex: 1。最初的回答。

      <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
  }
})

- Adrian Bartholomew

Answer 3

import React, { Component } from 'react';
import { View, ScrollView, TouchableOpacity, Text, StyleSheet } from "react-native";
import { Container, Content, Picker } from 'native-base';

export default class MyScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "key1",
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        <View style={styles.pickerBoxContainer}>
              <View style={styles.pickerBoxInner}>
                <Picker
                  selectedValue={this.state.district}
                  style={styles.pickerStyle}
                  placeholder="Select your SIM"
                  onValueChange={(itemValue) =>
                    this.setState({ district: itemValue })
                  }>

                  <Picker.Item label="Wallet" value="key0" />
                  <Picker.Item label="ATM Card" value="key1" />
                  <Picker.Item label="Debit Card" value="key2" />
                  <Picker.Item label="Credit Card" value="key3" />
                  <Picker.Item label="Net Banking" value="key4" />
                </Picker>
                <Icon style={styles.pickerBoxIcon} name="arrow-drop-down" type="MaterialIcons" />
              </View>
            </View>
          </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  mainContainer: {
    backgroundColor: BaseColors.white,
    flex: 1,
  },

 // picker box style
  pickerBoxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 8,
    marginTop: 10,
  },
  pickerBoxInner: {
    borderWidth: 0.6,
    borderColor: BaseColors.gray9,
    borderRadius: 2,
    overflow: 'hidden',
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    height: 37,
  },
  pickerBoxIcon: {
    position: 'absolute',
    right: 0,
    fontSize: 23,
    color: BaseColors.gray7,
  },
  pickerStyle: {
    width: '120%',
    paddingBottom: 0,
    paddingLeft: 0,
    transform: [{ scaleX: 0.85 }, { scaleY: 0.85 }],
    left: -25,
    position: 'absolute',
    backgroundColor: 'transparent'
  }
});

- sachin Sharma

Answer 4

这个来自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

- Norfeldt

---

他询问RN picker，而你提供了一个完全不同的库。 - user1971598