React-native-picker
提供:Dev Guides
React Native-ピッカー
この章では、2つの利用可能なオプションを備えた単純なピッカーを作成します。
ステップ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'
}
})
出力
名前をクリックすると、3つのオプションすべてが表示されます-
そして、それらのいずれかを選択すると、出力は次のようになります。