[英]How can I use react-native-picker to display content on the page depending on the current value of the picker?
I am trying to use react-native-picker
in my project and recently came across this Expo Snack: https://snack.expo.dev/HkM_BcGBW我正在尝试在我的项目中使用
react-native-picker
,最近遇到了这个 Expo Snack: https ://snack.expo.dev/HkM_BcGBW
I want to display content on the page depending on the current value of the picker.我想根据选择器的当前值在页面上显示内容。 For instance, some text right below the picker saying "The option you have selected is [text of the currently-selected option in the picker]."
例如,选择器正下方的一些文本说“您选择的选项是[选择器中当前选择的选项的文本]”。 How can I do this?
我怎样才能做到这一点?
You can do as the example and use state value to display in the component您可以作为示例并使用状态值在组件中显示
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: 'java',
}
}
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>The option you have selected is {this.state.language}</Text>
</View>
);
}
}
But do remember但请记住
onValueChange={(itemValue) => this.setState({language: itemValue})}
this stores value rather than the label.这存储值而不是标签。
you can use conditional rendering as below:您可以使用如下条件渲染:
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}>{this.state.language}</Text>
<Picker
style={styles.picker} itemStyle={styles.pickerItem}
selectedValue={this.state.language}
onValueChange={(text) => this.setState({language: text})}
>
<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>
{this.state.language == "haxe"?
<Text>Hello Haxa</Text>
:this.state.language == "js"?
<Text>Helo JavaScript</Text>
:this.state.language == "python"?
<Text>Helo Python</Text>
:this.state.language == "java"?
<Text>Helo Java</Text>
:<Text>Nothing</Text>}
</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'
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.