怎么用react native调用时间选择器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么用react native调用时间选择器相关的知识,希望对你有一定的参考价值。
参考技术A 首先使用reactnative编写一个简单的应用,在碰到问题的时候,肯定需要对代码进行调试。目前reactnative支持在Chrome浏览器内进行调试。需要选择Scheme->Run的选项为Debug,否则模拟器中不会出现调试选项。使用 react-native 设置选择器的高度
【中文标题】使用 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。希望这可以为其他寻找跨平台解决方案的人节省时间。以上是关于怎么用react native调用时间选择器的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React Native 中单独显示日期时间选择器?