使用 react-native 设置选择器的高度

Posted 2023-02-25

【中文标题】使用 react-native 设置选择器的高度

【英文标题】：Set height of picker with react-native

【发布时间】：2017-07-11 16:57:44

【问题描述】：

我的 react-native ios 应用中有一个选择器，想设置高度，但该示例不支持 flex、样式高度或高度属性。

<Picker
    style=[styles.testbox, borderColor: '#00F', flex:1, height: 100]
    selectedValue=this.state.language
    height=100
    onValueChange=(itemValue, itemIndex) => this.setState(language: itemValue)>
    <Picker.Item label="Java" value="java" />
    <Picker.Item label="javascript" value="js" />
</Picker>

【参考方案1】：

文档中没有 height 属性，因此您可以将其删除。

从玩弄样式来看，看起来最重要的部分是设置 itemStyle 属性并在那里定义 height 值。您可能还希望设置Picker 组件本身的样式并将height 值设置为相同以获得最佳效果，但您不需要这样做。 p>

小例子：

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

【讨论】：

这很好用，谢谢！这根本不是文档所说的......需要记住阅读源代码。

注意：不适用于 android。 itemStyle 仅适用于 iOS。希望这可以为其他寻找跨平台解决方案的人节省时间。