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

Posted

技术标签:

【中文标题】使用 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'
  ,
);

【讨论】:

这很好用,谢谢!这根本不是文档所说的......需要记住阅读源代码。 注意:不适用于 androiditemStyle 仅适用于 iOS。希望这可以为其他寻找跨平台解决方案的人节省时间。

以上是关于使用 react-native 设置选择器的高度的主要内容,如果未能解决你的问题,请参考以下文章

在 react-native 中将组件高度设置为 100%

将 Kendo UI 网格高度设置为包装器的 100%

React-Native 图像高度(全宽)

日期选择器的 Kendo 自定义验证

Prisma 查询解析器失败:“where 选择器的参数无效”

Android selector选择器的使用