有没有办法为React Native设置Picker组件的样式并使其高度更小？

Question

我想在我的React Native应用程序中使用Picker组件,但它占用了太多的屏幕高度.有没有办法让选择器限制自己一次只显示两个项目,然后可以在其中滚动？

Answer 1

从玩弄造型,看起来最重要的部分是设置itemStyle道具并在height那里定义价值.您可能还希望为Picker组件本身设置样式,并将height值设置为相同的最佳结果,但您不需要这样做.

关于尝试显示两行:

• 显示一个项目看起来高达44.
• 由于本机Picker组件的设计方式,您无法在iOS中真正显示两个项目.它将显示当前所选值的上方和下方的部分内容.所以充其量你可以显示这些值的一半/一半.你必须高高兴兴地找到适合自己的东西.

最小例子:

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

Answer 2

NativeBase 的这个怎么样：

\n\n

import React, { Component } from \'react\';\nimport { Container, Content, Picker } from \'native-base\';\nconst Item = Picker.Item;\xe2\x80\x8b\nexport default class PickerExample extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            selectedItem: undefined,\n            selected1: \'key1\',\n            results: {\n                items: []\n            }\n        }\n    }\n    onValueChange (value: string) {\n        this.setState({\n            selected1 : value\n        });\n    }\n    render() {\n        return (\n            <Container>\n                <Content>\n                    <Picker\n                        iosHeader="Select one"\n                        mode="dropdown"\n                        selectedValue={this.state.selected1}\n                        onValueChange={this.onValueChange.bind(this)}>\n                        <Item label="Wallet" value="key0" />\n                        <Item label="ATM Card" value="key1" />\n                        <Item label="Credit Card" value="key2" />\n                        <Item label="Debit Card" value="key3" />\n                   </Picker>\n                </Content>\n            </Container>\n        );\n    }\n}\n

\n\n

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

\n