React Native选择器Picker – React Native实战教程

上一章React
Native实战教程请查看:React
Native活动指示器ActivityIndicator

在本章中,我们将使用两个可用选项创建简单的选择器。

步骤1:创建文件

在这里,App.js文件夹将用作表示组件。

App.js

import React from 'react';
import PickerExample from './PickerExample.js';

const App = () => {
  return <PickerExample />;
};
export default App;

步骤2:逻辑

this.state.user用于选择控件。

当用户被选中时,updateUser函数将被触发。

PickerExample.js

import React, {Component} from 'react';
import {View, Text, Picker, StyleSheet} from 'react-native';

class PickerExample extends Component {
  state = {user: ''};
  updateUser = user => {
    this.setState({user: user});
  };
  render() {
    return (
      <View>
        <Picker selectedValue={this.state.user} onValueChange={this.updateUser}>
          <Picker.Item label="Steve" value="steve" />
          <Picker.Item label="Ellen" value="ellen" />
          <Picker.Item label="Maria" value="maria" />
        </Picker>
        <Text style={styles.text}>{this.state.user}</Text>
      </View>
    );
  }
}
export default PickerExample;

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
    alignSelf: 'center',
    color: 'red',
  },
});

输出

React Native Picker选择器01

如果你点击名字,它会提示你三个选项都为-

React Native Picker选择器02

你可以从中选择一个输出是这样的。

React Native Picker选择器03
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?