react native显示下拉框
时间: 2023-08-18 20:08:52 浏览: 136
Learning React Native
4星 · 用户满意度95%
在 React Native 中,可以使用 Picker 组件来显示下拉框。具体步骤如下:
1. 在组件中导入 Picker 组件:
```
import { Picker } from 'react-native';
```
2. 在组件的 render 方法中,使用 Picker 组件,并设置相应的属性:
```
<Picker
selectedValue={this.state.language}
style={{ height: 50, width: 200 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ language: itemValue })
}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
```
其中,selectedValue 属性表示选中的值,style 属性设置下拉框的样式,onValueChange 属性表示当选中值发生变化时的回调函数,Picker.Item 组件表示下拉框中的每一项。
3. 在组件中设置 state,以保存选中的值:
```
constructor(props) {
super(props);
this.state = { language: 'java' };
}
```
这样就可以在 React Native 中显示下拉框了。
阅读全文